vuex基础使用

1.下载	
	cnpm/npm i vuex -S
2.导入vuex
	import Vuex from 'vuex';

3.通过new Vuex.store()实例 得到一个数据仓储对象
let store = new Vuex.Store({
	state:{//可以吧state想象成是组件中的data
		count:999	//如果想访问store中的数据  通过 this.$store.state.***
	},
	mutations:{//想象成是组件的methods
		adds(state){	//如何调用方法 : this.$store.commit('方法名')
			state.count++;
		},
		delete(state,obj){
			state.count-=(obj.a+obj.b);
			//mutations中的函数最多支持两个参数,
			//参数一:永远是state配置项
			//参数二:是通过commit提交过来的参数,可以穿传对象和数组
		}
	},
	getters:{//只负责对外提供数据,不负责修改数据,如果要修改数据,请去找mutations
		//用法和 组件的过滤器类似,和计算属性computed也类似
		//只要state发生变化,那么getters中的数据也会触发而重新求值。
		cmtCount: function(state) {
			return '当前的值是:' + state.count;
		}//调用 this.$store.getters.***

	}
})

let vm = new Vue({
    el: '#app',
    data: {
    },
    //4.将store挂载到VM实例上
    store,
});

总结: 1.state中的数据不能直接修改,如果想修改必须通过mutations
2.如果组件想从state中获取数据,需要 this.$store.state.属性名
3.如果组件想调用mutations中的方法,需要通过this.$store.commit('方法名',唯一的一个参数)
4.若组件想调用getters中的方法;通过this.$store.getters.方法名

猜你喜欢

转载自blog.csdn.net/weixin_42595284/article/details/83479954