一、src目录下面新建一个vuex文件夹
二、vuex文件夹新建一个store.js文件
三、安装vuex
npm install vuex --save
四、在刚才创建的store.js引入vue 引入vuex并use vuex
import Vue form 'vue' import Vuex form 'vuex' Vue.use(Vuex)
五、定义数据 state
/* state在vuex中用于存储数据*/ var state={ count=1, }
六、定义方法 mutations
mutations 里面放的是方法,方法主要用于改变state里面的数据 var mutations ={ inCount(){ ++state.count; } }
七、暴露实例
const store =new Vuex.Store({ state, mutations }) export default store;
八、组件里面使用vuex
- 引入store
import store form '../vuex/store.js'
- 注册
export defalut { data (){ return { msg:'eeee' } }, store, methods:{ inCount(){ //改变 vuex store里面的数据 this.$store.commint('inCount'); //触发state里面的数据 } } }
3.获取state里面的数据
this.$store.state.数据
4.触发mutations 改变state里面的数据
this.$store.state.commit('inCount');
getters
类似计算属性。改变state里面的count数据的时候会触发getters里面的方法,获取新的值
getters:{ doneTodoCount:(state,getters) =>{ return getters.doneTodos.length } }
store.js配置
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/ var state={ count:1, list:[] } /*2.mutations里面放的是方法,方法主要用于改变state里面的数据 */ var mutations={ incCount(){ ++state.count; }, addList(state,data){ state.list = data; } } /*3、优点类似计算属性 , 改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)*/ var getters= { computedCount: (state) => { return state.count*2 } } 4. action Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。 actions不能直接修改全局变量,需要调用commit方法来触发mutation中的方法 */ var actions= { incMutationsCount(context) { /*因此你可以调用 context.commit 提交一个 mutation*/ context.commit('incCount'); /*执行 mutations 里面的incCount方法 改变state里面的数据*/ } } //vuex 实例化 Vuex.store 注意暴露 const store = new Vuex.Store({ state, mutations, getters, actions }) export default store;
vuex中的getters和组件内computed很相似。那什么时候用vuex呢?
- 如果数据还有其他组件复用
- 需要跨多级组件传递数据
- 持久化的数据(如登录后用户的信息)
- 跟当前业务组件强相关的数据,可以放在组件内