vuex的使用

vuex是vue中用来管理状态的一套解决方案，它提供一个数据中心，用以管理所有组件的状态，当应用中的组件越来越多，根据组件的通信机制，消息的传递会变得难以维护，且在视图渲染中出现问题，比如想象一下一个父组件的数据需要传递给子组件，子组件接收到数据后做了该做的处理之后，需要把数据再返回给父组件，同时通知同级兄弟组件，父组件与兄弟组件收到数据后需要对视图做出改变，这一操作使用通信机制将变得非常复杂，不易维护，如果应用中组件之间充斥着类似需求，想一想都知道组件的状态是无法维护的，再者，组件难免需要一些共享数据，比如登录用户信息，如果没有数据中心的概念，我们只能放在window全局变量中，很明显这种做法不是正规军的做法。另外，使用路由时，当“页面”越来越多，从属关系变得复杂时，“页面”之间的数据传递也是无法有序维护的。vuex的出现即解决了这些难题。

vuex官方演示图

vuex需要做的是绿色虚线内的事，vuex中的数据是单向流动的，vuex建立了一个数据中心store，有三个很重要的概念是：
State：store中的数据，可以理解类似vue实例中的data，数据中心中的数据就保存在这
Actions：动作，我们在组件中触发这些动作，这些动作里调用同步或者异步（ajax请求）后，提交触发数据变更请求。可以理解类似vue实例中的methods。
Mutations：实际就是字面意思，变更，mutations由actions触发，改变数据的动作就在这里进行，actions中不直接操作state数据。

安装vuex

npm i vuex -S 

使用vuex

import Vuex from 'vuex'
Vue.use(Vuex)

我们使用的是实际上是Vuex中的store实例。

const store = new Vuex.store()
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

store实例中的配置项有

new Vuex.Store({
  state:{},
  actions: {},
  mutaitons: {},
  getters: {},
  modules: {},
  strict: true,
  plugins: []
})

• state：vuex中的根状态对象，用来定义共享的状态对象，类似vue实例中的data
• actions：状态动作，向store提交调用通知，调用mutaitions中的方法来改变状态，同步、异步操作在这里执行，执行之后提交调用mutations，类似vue实例中的methods，也可以想象成springmvc中的service层，逻辑处理完毕后需要去调用dao完成数据的修改。
• mutations：状态改变定义，由actions调用，这里没有负责的逻辑，只负责更改state中的数据，可以想象成springmvc中的dao层。
• getters：state数据获取，类似vue中的computes计算属性，比如要获取的是某个state中数组的长度，或者两个属性之和，当然用计算属性比较合适。
• modules：state数据的模块，可以理解为命名空间。
• strict：true为调试模式，false生产模式。
• plugins：向vuex中添加插件。

vuex中的操作就是围绕着前五个选项进行的。

• $state.dispatch(‘action名’，参数列表)
  用于组件中触发store的action
• $state.commit(‘mutation名’，参数列表)
  用于action中调用store的mutation

在实际运用过程中类似view-router,vuex也提供了建议的代码结构。在src下单独建立一个store的目录，用于管理应用的状态。

看官方文档即可。
关于vuex的示例代码，官方提供的examples非常清晰了。

vuex github地址
https://github.com/vuejs/vuex

使用是简单的，但是思想是需要慢慢体会消化的，没有什么比动手写代码更好的方法了。