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

1、安装依赖库

npm install vuex --save-dev

2、配置 Vuex 实例

对比 Vue2Vue3 各自创建 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)
    }
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐