vue3.0 vuex的使用

vue 2.x的模块是相同的

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

在main.js中

import store from "./store";

挂载 const app =createApp(App) app.use(store) app.use(router) app.mount("#app");

store/index.js

import { createStore } from "vuex";

export default createStore({  
  //数据储存属性  
  state: {  
    num:0
  },  
  // 方法属性  
  mutations: {  
    MaddNmu:function(state,params){  
      state.num +=params.num  
    }  

  },  
  //异步属性  
  actions: {  
    AaddNmu:function({commit},parmas){  
      setInterval(()=>{  
        commit('MaddNmu',parmas),1000  
      })  
    }  

  },  
  //计算属性  
   getters:{  
     GaddNum:function(state){  
       return state.num +=20  
     }  
     

   },  
   // 模块化属性  
  modules: {},  
});

组件中

<template>
  <div>
      {{num}}
      <div @click="addNum" class="click">点击</div>
      <div @click="addNum1" class="click">点击1</div>
      
  </div>
</template>

<script>
import {ref} from 'vue'
import {useStore} from "vuex";
export default {
  setup(props,ctx) {
    console.log(ctx);
    
    const store = useStore();
    const state = store.state;
    const num = ref(0)
    function addNum () {
      //state
      console.log(state.num)

      // mutations
      store.commit('MaddNmu',{num:10})
      // store.commit({type:'MaddNmu'},{num:10})
      num.value += state.num
  
      
    }
    function addNum1 () {
          // actions
      store.dispatch('AaddNmu',{num:10})
      num.value += state.num

      // getters
      // num.value = store.getters.GetaddNmu

    }
    return{
      num,
      state,
      addNum,
      addNum1

    }
  }

}
</script>

<style lang="less" scoped>
.click{
  width: 60px;
  height: 30px;
  background-color: aquamarine;
  cursor: pointer;

}
</style>