Vuex专为vue.js应用程序开发的状态管理模式，目的解决繁杂事件订阅和广播。

有的时候一个事件，对应的模块都要找半天，而vuex相当于中介，又可以看作是模块化，一种对事件通信的模块化处理。对一个事件，vuex大体可以看作四步，第一到action里面查到这个事件的触发，第二到mutaction里面查看对应处理，第三步改变store的状态，第四部getter视图渲染；vuex三个关键词：action,mutation,store,中文意思：活动的，突变的，储存的，注意action，mutation，getter都必须是函数。

文件目录顺序如下：
1.index.js(定义):入口脚本，为单一状态树，需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态，vuex里面的状态只读（计算属性computed也是只读），修改状态只能dispatch。需要引入以下文件：

import * as actions from './actions'
import * as getters from './getters'
import mutations from './mutations'

2.mutation-type.js：声明整个项目存在的事件有哪些；
3.actions.js:事件对应的函数操作。mounted挂载下的dispatch方法触发action相关处理，若页面状态需要改变，则调用commit方法提交mutation修改state。此文件要导入mutation-type.js和用到的API文件；
4.mutation.js（获取）:监听事件（修改state），此文件要导入mutation-type.js；
5. getters.js:获取到state新值，重新渲染Vue组件，界面随之更新；
5.各个零件汇总得到store.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import plus from './mutations/a模块'
import mins from './mutations/b模块'
Vue.use(Vuex)

export default new Vuex.Store({
   modules:{
       a模块,
b模块
   }
})

在module选项里写入各自模块名字，对外提供一个大的vuex实例。
总结：

vuex状态管理模式的数据储存在store里面，和localstorege的区别是：locastorge不能自动变化，而store可以。
Vue的路由管理页面交互； Vuex管理同一个页面的多个组件的交互；
Computed里面的值默认只读,index.js里面的状态也是默认只读，需要修改只能dispatch；
只要在vue的function里面都要加this(作用域改变)

Vuex专为vue.js应用程序开发的状态管理模式，目的解决繁杂事件订阅和广播。

猜你喜欢