- state 存放状态(数据) 必须的
- mutations state成员操作 -- 修改state中的数据 同步操作
- getters er 加工state成员给外界 -- 获取state中的数据,类似于组件中的计算属性
- actions 异步操作 异步操作 在vuex中可以进行异步操作(ajax),异步操作不能修改state
- modules 模块化状态管理 多状态文件管理时使用
首先,Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时,需要dispatch VueX中actions的方法,以保证数据的同步。可以说,action的存在就是为了让mutations中的方法能在异步操作中起作用。
如果没有异步操作,那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。不建议在组件中直接对state中的成员进行操作,这是因为直接修改(例如:this.$store.state.name = 'hello')的话不能被VueDevtools所监控到。最后被修改后的state成员会被渲染到组件的原位置当中去。
安装
- 方案1:在使用vue-cli命令创建项目时,勾选上vuex选项,即安装上vuex插件(推荐)
- 方案2:通过后续的npm来进行安装 【npm i -S vuex】
src下创建store
main添加
同步修改 commit
home.vue中的methods
不生效,data换成计算属性
store里的mutation
异步修改
首先要有数据 => 模拟数据 => json文件
onAjax可以不用,代码可以直接写在mounted里
data里记得users:[]
全局去用 getters
简写
使用
模块化
export default { }