Vuex的基本使用与概念解析

一、什么情况下应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果不打算开发大型单页应用，应用够简单，最好不要使用 Vuex。一个简单的 store 模式就足够了。但是，如果需要构建一个中大型单页应用，就要考虑如何更好地在组件外部管理状态，Vuex 是不错的选择。

二、基本使用

在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。将其注入到Vue根实例中。

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
   
  state: {
   
    count: 0
  },
  getter: {
   
    doneTodos: (state, getters) => {
   
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
   
    increment (state, payload) {
   
      state.count++
    }
  },
  actions: {
   
    addCount(context) {
   
      // 可以包含异步操作
      // context 是一个与 store 实例具有相同方法和属性的 context 对象
    }
  }
})
// 注入到根实例
new Vue({
   
  render: h => h(App),
  store
}).$mount('#app')

然后改变状态：

this.$store.commit('increment')

三、核心

Vuex 主要有四部分：

1.state：包含了store中存储的各个状态。
2.getter:类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。
3.mutation:一组方法，是改变store中状态的执行者，只能是同步操作。
4.action:一组方法，其中可以包含异步操作。

1、State:

Vuex 使用 state 来存储应用中需要共享的状态。为了能让 Vue 组件在 state更改后也随着更改，需要基于state 创建计算属性。

// 创建一个 Counter 组件
const Counter = {
   
  template: `<div>{
    { count }}</div>`,
  computed: {
   
    count () {
   
      return this.$store.state.count  // count 为某个状态
    }
  }
}

注意：一般不通过state来直接修改属性，而是通过mutations来修改。

2、Getters

类似于 Vue 中的 计算属性（可以认为是 store 的计算属性），getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getters中的方法有两个默认参数:
state 当前VueX对象中的状态对象
getters 当前getters对象，用于将getters下的其他getter拿来用

Getter 方法接受 state 作为其第一个参数：

const store = new Vuex.Store({
   
  state: {
   
    todos: [
      {
    id: 1, text: '...', done: true },
      {
    id: 2, text: '...'