vue3.0中vuex的使用

首先，vuex中有默认的五个核心概念：

1. state：存储状态（变量）
2. getters：对数据获取之前的再次编译，可以理解为state的计算属性。在组件中通过 this.$store.getters.xxx使用
3. mutations：修改状态，并且是同步的。在组件中通过this.$store.commit(‘xxx’,params)使用。这个和我们组件中的自定义事件类似。
4. actions：提交 mutation，异步操作。在组件中通过this.$store.dispath(‘xxx’)使用
5. modules：store的子模块，为了开发大型项目，方便状态管理而使用的，即将store分割为模块，使store对象不会太臃肿。这里我们就不解释了，用起来和上面的一样。

store/index.js

import { createStore } from 'vuex'

export default createStore({
  //数据存储属性
  state: {
    num:0
  },
  //方法属性
  mutations: {
     MUTaddNum:function(state,params) {
       state.num += params.num;
    }
  },
  //异步属性
  actions: {
    ACTaddnum:function({commit},params){
      setTimeout(()=>{
        commit("MUTaddNum",params)
      },1000)
    }
  },
  //计算属性
  getters:{
    GETaddnum:function(state){
      return state.num += 20;
    }
  },
  modules: {
  }
})

组件中：

import { ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "Home",
  components: {
  },
  setup() {
    const store = useStore();
    const state = store.state;
    const num = ref(0);
    function addNum() {
      // state
      // console.log(state.num);

      // mutations
      // store.commit("MUTaddNum",{num:1});
      // store.commit({type:"MUTaddNum",num:1});

      // actions
      // store.dispatch("ACTaddnum",{num:10});
      // store.dispatch({type:"ACTaddnum",num:10});

      // getters
      // num.value= store.getters.GETaddnum;
    }
    return {
      state,
      addNum,
      num,
    };
  },
};