在 Vue3 中使用 Vuex

本篇文章主要记录 Vue3 中使用 Vuex 的步骤和注意事项：

1、安装依赖库

npm install vuex --save-dev

2、配置 Vuex 实例

对比 Vue2 和 Vue3 各自创建 Store 实例的区别；

• Vue2 是用 Vue.use(Vuex)注入 Vuex 插件，然后通过 new Vuex.Store(options)来创建；
• Vue3 则是直接从 vuex 中引入 createStore 来创建；

// vue3
import { createStore } from "vuex";
const store = createStore({
    state: {},
    mutations: {},
    actions: {},
    getters: {},
   	modules: {}
})
export default store;

// main.ts
createApp(App).use(store).mount('#app')

// vue2
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    getters: {},
   	modules: {}
})

// main.ts
new Vue({
  el: '#app',
  store
})

3、Vuex 的使用

在 Vue3 中，Vuex 提供了一个方法 useStore，我们可以通过这个方法来获取到全局的 store 实例；

<script lang="ts" setup>
import { computed } from "vue";
import { useStore } from "vuex";
const store = useStore()
const count = computed(() => store.state.count) // state 中的 count
const gettersCount = computed(() => store.getters.getter_count) // getters 中的 getter_count
const add = () => {
    store.commit('ADD_COUNT') // 提交 mutations 方法
    store.dispatch('SYNC_ADD_COUNT') // 提交 actions 方法
}
</script>

（1）要获取到 store 实例中的属性，需要用 computed 去获取，如果直接通过 store.state.xxx去获取，commit 的时候修改属性，页面不会发生变化，computed 则会发生变化；

（2）要修改 store 中的属性，需要通过 store.commit(方法名)的形式来修改；

（3）异步修改store 中的属性，可以通过 store.dispatch(方法名)来修改，实际上最后也是通过 commit来修改；

actions: {
    SYNC_ADD_COUNT({ commit }) {
        setTimeout(() => {
            commit('ADD_COUNT')
        }, 1000)
    }
}