技术博客：Vue3通过setup使用vuex多模块持久化+命名空间页面调用

2023-09-22 16:22:23

在Vue3中，可以使用setup函数来实现vuex多模块持久化和命名空间页面调用。这将使您能够在您的Vue3应用程序中轻松地管理状态并提高可维护性。

多模块

Vuex多模块是一种将store中的数据拆分成多个模块的方式。每个模块都有自己的state、mutations和actions。这使您可以将store中的数据组织成更小的、更容易管理的块。

要使用多模块，您需要在您的Vuex store中创建一个名为modules的对象。这个对象包含了您要创建的每个模块的配置。

const store = new Vuex.Store({
  modules: {
    counter: {
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        incrementAsync ({ commit }) {
          setTimeout(() => {
            commit('increment')
          }, 1000)
        }
      }
    }
  }
})

持久化

Vuex持久化是一种将store中的数据存储在本地存储中的方式。这使您可以即使在页面刷新后也能保留store中的数据。

要使用持久化，您需要在您的Vuex store中安装一个持久化插件。有很多持久化插件可用，但最流行的之一是vuex-persist。

import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'

const vuexLocalStorage = new VuexPersist({
  key: 'my-app',
  storage: window.localStorage
})

const store = new Vuex.Store({
  plugins: [vuexLocalStorage.plugin]
})

命名空间

Vuex命名空间是一种将store中的数据和操作限定在特定的模块中的方式。这使您可以避免不同模块之间的名称冲突。

要使用命名空间，您需要在模块的配置中指定一个命名空间。

const store = new Vuex.Store({
  modules: {
    counter: {
      namespaced: true,
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        incrementAsync ({ commit }) {
          setTimeout(() => {
            commit('increment')
          }, 1000)
        }
      }
    }
  }
})

在setup函数中使用vuex

在setup函数中可以使用useStore和mapState、mapMutations、mapActions等方法来使用vuex。

import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    const count = store.state.counter.count

    const increment = () => {
      store.commit('counter/increment')
    }

    const incrementAsync = () => {
      store.dispatch('counter/incrementAsync')
    }

    return {
      count,
      increment,
      incrementAsync
    }
  }
}