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 可以包含任意异步操作。