本篇文章主要记录 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)
}
}
