vue3中如何使用vuex

vue3中改如何使用vuex

首先，npm安裝vuex。

npm install vuex@next --save

然后在文件夾路徑下建立views/store/index.js。
mutations使用store.commit方法觸發。action 通過 store.dispatch方法觸發。

<script>
  import { useStore } from 'vuex'
  const handleClick = () => {
    const store = useStore();
    //第1步：想改變數據，vuex要求，必須派發一個action
    store.dispatch('change');
  }
</script>

import { createStore } from 'vuex'

export default createStore({
  state: {
    name:'小阿紫'
  },
  getters: {},
  mutations: {// 定義mutations，用於修改狀態(同步)
    //第4步，對應的mutation被執行
    change(state, payload) {//state不用解釋了，payload（荷載）即是在store.commit()中帶入的參數 
      //第5步，在mutation里修改數據
      state.name = 'azi';
    }
  },
  
  actions: {// 定義actions，用於修改狀態(異步)。如果修改數據不需要涉及異步操作，只需要同步修改state中數據的話，直接調用commit即可。
    //第2步，store感知到你觸發了一個叫做change的action,執行change方法
    change(content) {
      //第3步，提交一個commit觸發mutation
      content.commit('change')
    }
  },  
  modules: {}
})

Action 類似於 mutation，不同在於：
1.Action 提交的是 mutation，而不是直接變更狀態。
2.Action 可以包含任意異步操作。