vuex:同一状态(全局状态)管理,简单的理解,在SPA单页面组件的开发中,在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、修改,并且你的修改可以同步全局。
1,安装 npm i vuex --save
2,在src文件目录下新建store>index.js文件
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store(); export default store;
3, 入口文件里面引入store,然后再全局注入
import store from './store'//引入store new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } })
4,使用
4-1,Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,Getters 可以用于监听、state中的值的变化,返回计算后的结果
4-2,提交一个actions,在actions中提交mutation再去修改状态值。把commit提交mutations修改为使用dispatch来提交actions