几分钟弄懂Vuex的五大属性和使用方式

来讲解一下“几分钟弄懂Vuex的五大属性和使用方式”的攻略。

1. 什么是Vuex？

Vuex是一个专门为Vue.js开发的状态管理模式。它采用集中式存储管理您应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. Vuex的五大属性

在Vuex中，数据是通过五个核心属性进行管理：state、mutation、getter、action和module。

2.1 state

State用于存放应用程序状态，即其所有数据。

State数据可以在模板和实例中通过this.$store.state直接得到。

下面是一个简单的计数器示例：

// store.js

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

// App.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.state.count++
    },
    decrement() {
      this.$store.state.count--
    }
  }
}
</script>

2.2 mutations

在Vuex中，state数据可以通过提交mutations实现改变。

mutations是一些操作state的方法。

每个mutation都有一个字符串类型的事件类型和一个回调函数，该函数被用于实际改变状态。

下面是一个修改count的示例：

// store.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count += 1
    },
    decrement(state) {
      state.count -= 1
    }
  }
})

// App.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    }
  }
}
</script>

2.3 getter

Getter用于从store中派生状态。

Getter会对store中的state数据进行一些计算和处理后，生成一个新的数据供其他组件使用。

Getter的使用方式和computed属性类似。可以通过在计算属性中返回store的getter函数来获取它的值。

下面是一个示例：

// store.js

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'todo1', done: true },
      { id: 2, text: 'todo2', done: false },
      { id: 3, text: 'todo3', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

// App.vue

<template>
  <div>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    doneTodos() {
      return this.$store.getters.doneTodos
    }
  }
}
</script>

2.4 action

Action用于处理异步任务和复杂逻辑。

Action类似于mutation，但是Action可以包含异步操作，而mutation之所以不能包含异步操作是因为mutation必须是同步的。

Action包含两个部分：一个描述事件的type和一个callback函数，Callback函数接受一个名为context的context对象。Context对象包含store中的state、getter和commit功能。

下面是一个示例：

// store.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count += 1
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})

// App.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="incrementAsync">+ (2s)</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>

2.5 module

Module可以将store分割成更小的模块。

每个模块都拥有自己的state、getter、mutation、action等。

下面是一个简单的示例：

// store.js

const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment(state) {
      state.count += 1
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
}

const moduleB = {
  state: () => ({
    name: 'moduleB'
  })
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

3. 使用方式

在使用Vuex时，常用的方式是将store注入Vue实例中。

下面是一个注入示例：

// main.js

import Vue from 'vue'
import store from './store' // 引入store
import App from './App.vue'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

在这个示例中，store被注入到Vue实例中，从而使我们可以在整个应用程序中访问$store实例。