vuex 用法 精炼版

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
})

vuex调用

调用方法

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);
      }
  }
};