vuex 可理解为vue项目中用于全局存储数据的仓库
state 数据存放位置
this.$store.state.num ;
getters 取数据
this.$store.getters.getNum;
mutations 修改数据
this.$store.commit("setNum", 100);
actions 异步修改数据
this.$store.dispatch('setNumSync ',200)
创建store
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
const state = {
num:0
}
//获取数据 store的计算属性
const getters = {
getNum: state => {
return state.num*2;
}
}
//真正修改store中数据的唯一方式 必须同步
const mutations = {
setNum(state, num) {
state.num = num;
}
}
//异步方式修改store中数据 原理为调用mutations
const actions = {
setNumSync (context,newNum) {
setTimeout(()=>{
context.commit('setNum',newNum)
},3000)
}
}
export default new Vuex.Store({
state,
getters,
mutations,
actions
})
调用方法
export default {
computed: {
count(){
//在组件中获取{{num}}方式
console.log(this.$store.state.num);
//通过getters获取
console.log(this.$store.getters.getNum);
//设置新num
this.$store.commit("setNum", 100);
console.log(this.$store.state.num);
//异步设置新mum
this.$store.dispatch('setNumSync ',200)
console.log(this.$store.state.num);
}
}
};