Vuex最简单明了的教程
1.State
状态存储的地方
const state={
count:2,
}
2.修饰器:Getter
使用getter会更加方便快捷,简化仓库数据,类似计算属性,让组件取值更加方便
const getters={
getCount (state) {
return "hello world" +state.count
}
}
在组件中直接取值的:
export default {
mounted() {
// 注意不是$store.state了,而是$store.getters
console.log(this.$store.state.count);
console.log(this.$store.getters.getCount );
}
}
这种方式虽然也能取到值,但是不太灵活,建议使用mapGetters去解构到计算属性中,就像使用mapState一样,就可以直接使用this调用了,就像下面这样:
computed: {
...mapState(['count']),
...mapGetters(['getCount ']),//仅仅可以取值,不能直接修改
},
3.Mutation
唯一可以修改state里面值的地方(只能同步修改)
方式一:(推荐,简单易懂)
const mutations={
add(state,payload){
//{vuex仓库,所传的参数}
state.count += payload.number
}
}
//组件中添加(就是往vuex中存值)
this.$store.commit("add", {
num: 2 }); //标准写法
方式二:
methods: {
// 注意,mapMutations是解构到methods里面的,而不是计算属性了
...mapMutations(['add']),
click(){
this.add({
number: 10 }); //小技巧,效果同上
},
4.Actions
vuex作者不希望你将异步操作放在Mutations中,所以就给你设置了一个区域,让你放异步操作,这就是Actions,异步的修改vuex里面的值,比如定时器,axios请求等
修改store/index.js
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
countAdd(state, payload) {
state.number += payload.number;
},
},
actions: {
setNum(content) {
// 第一个参数是content,其值是复制的一份store
return new Promise(resolve => {
// 我们模拟一个异步操作,1秒后修改number为888
setTimeout(() => {
content.commit('countAdd', {
number: 888 });
resolve();
}, 1000);
});
}
}
});
//组件中
this.$store.dispatch('setNum');
5.Modules