vuex浅析

官方说明：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

显然现在不是讨论用不用vuex的时候，直接进入主题。

在vue.js组件传值中介绍了父子组件之间的传值，使用vuex可以解决一般性的组件之间数据共享，即没有关联的两个组件之间也可以共享组件。

1.全局注册vuex

在新建src/store/index.js（个人文件结构习惯，仅供从参考），代码：

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  //...})

现在有vuex实例，那么如何去使用它呢？
在vue的入口main.js中全局注册我们刚刚新建的vuex，main.js中添加代码：

import store from './store'

new Vue({  // ...    store})

这样在所有的组件中都可以通过this.$store访问vuex实例。

2.state
vuex中所有的状态都在state中，有点想vue中的data。修改上面的示例，在修改src/store/index.js：

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  state: {    count:0,    todoList:[      {id: 1,text: 'homework',finish:true},      {id: 1,text: 'run',finish:false}    ]  }})

那么各个组件可以通过this.$store.state.count访问vuex实例中的count，如在组件vueA.vue中:

<p>init count  =  {{count}}</p>

computed: {      count () {          return this.$store.state.count      }  }

这样只要vuex中的count有修改，vueA中的count也会修改。

3.getter
有时候我们需要从 store 中的 state 中派生出一些状态，如

• 未支付/未发货：待付款
• 未支付/已发货：货到付款
• 已支付/未发货：代发货
• 已支付/已发货：待收货

在实际应用中可以会有一些组合状态，但是在各个组件中，不能在各个组件中通过运算获取这些组件状态，因为这样可能导致各个组件之间状态不一致，并且维护起来不方便，对于这种组合状态，可以在vuex中统一运算，通过getter暴露给各个组件，保持组件的状态一致，也方便维护。

举一个简单的栗子：
对于上例中的todoList，vuex提供一个获取已经完成list的方法，即总是给出finish == true的todolist：

getters: {    doneList (state){      return state.todoList.filter(item => item.finish)    }  }

各个组件获取doneList ：

computed: {        doneList () {      return this.$store.getters.doneList    }      }

这样组件只负责获取vuex中的状态，而状态的逻辑由vuex控制。

4.mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
这句话的意思是组件可以通过this.$store.state.count访问vuex中的状态，但是这是只读的，不能通过简单的赋值改变vuex中的状态，这样做的好处在于无法简单改变vuex的状态，必须要显示的提交修改，便于掌握数据的流向。
假设我们现在需要使上例中的count加1，通过上面的说明，this.$store.state.count++是不会起作用的。

那么如何实现count加1?添加src/store/index.js代码：

mutations: {    addCount (state) {      state.count++    },    minCount (state) {      state.count--    }  }

在mutations中定义了addCount 和minCount ，通过代码看到分别实现了count加一和减一，在组件中调用方法如下：

<button @click="add()">+1</button>

methods: {      add () {          this.$store.commit('addCount')      }  }

通过this.$store.commit(‘addCount’)调用vuex的mutations中的addCount。
如果希望传递其他的参数：

mutations: {    addCount (state,para) {      state.count++    }      }

this.$store.commit('addCount',para)

mutations中的方法第一个参数为state，传递过去的参数依次往后。

5.action
官方说明：action 类似于 mutation，不同在于:

• Action 提交的是 mutation，而不是直接变更状态。

• Action 可以包含任意异步操作。

  示例：

  actions: {    addCount (context) {      setTimeout(() => {        context.commit('addCount')      },1000)    }  }

组件中访问：

this.$store.dispatch('addCount')

可以看到通过dispatch关键字访问action中的方法，而在action中需要改变vuex中的状态，仍然需要显示调用commit。

6.modules
为了解决臃肿问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。

详情见官网https://vuex.vuejs.org/zh-cn/modules.html

7.map…
关键字state、getters、mutations、actions都有对应的map关键字，分别为mapState 、mapGetters 、mapMutations、mapActions
他们的主要作用是映射。
对于mapState、mapGetters 主要用于组件的computed中：

computed: {  localComputed () { /* ... */ },  // 使用对象展开运算符将此对象混入到外部对象中  ...mapState({    // ...  })}

主要作用是使代码更加简洁，对比两种写法：

count () {          return this.$store.state.count      }

 ...mapState ({       count:'count'    })

这样假如有大量的状态，使用mapState只需要做映射，而第一种写法每次都要return this.$store.state.count

其他的map系列都是同样的作用，不一一细讲。
代码地址：https://github.com/Demon-han/vuex-demo/