Vuex 以及 Pinia 中模块化以及命名空间的使用

前言

之前开发过 dvajs ，发现 dvajs 中大多数都是用类似 dispatch('xx/xxx') 这种有命名空间 的开发模式，并且如果一直把所有 store 往一个项目里面堆会导致 store 难以维护 , 所以采用 模块化的store 来进行开发

模块

代码

menu/index.js

const MenuStore = {
  namespaced: true,
  state: {
    menu: []
  },
  getters: {
  },
  mutations: {
    setMenu (state, payload) {
      state.menu = payload
    }
  },
  actions: {
    setMenu (context, payload) {
      setTimeout(() => {
        context.commit('setMenu', payload)
      }, 1000)
    }
  }
}
export default MenuStore

user/index.js

const UserStore = {
  namespaced: true,
  state: {
    user: {}
  },
  getters: {
  },
  mutations: {
    setUser (state, payload) {
      state.user = payload
    }
  },
  actions: {
    setUser (context, payload) {
      setTimeout(() => {
        context.commit('setUser', payload) // 通过context去触发mutions中的sum
      }, 1000)
    }
  }
}
export default UserStore

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import UserStore from './user'
import MenuStore from './menu'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    'menu': MenuStore,
    'user': UserStore
  }
})
export default store

具体页面调用

<template>
  <div class="hello">
    <ul>
      <li
        v-for="(v,i) in getMenu"
        :key="i"
      >
        {{v}}
      </li>
    </ul>
    <button @click="changeMenuMutations">点击我改变 menu (mutations) </button>
    <button @click="changeMenuActions">点击我改变 menu (actions) </button>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
  name: 'Vuex',
  data () {
    return {
      arr: []
    }
  },
  mounted () { },
  methods: {
    ...mapMutations({
      setMenu: 'menu/setMenu'
    }),
    ...mapActions({
      setMenuActions: 'menu/setMenu'
    }),
    changeMenuMutations () {
      this.arr.push('菜单(Mutations)导入' + this.arr.length)
      //this.$store.commit('menu/setMenu', this.arr)
      this.setMenu(this.arr)
    },
    changeMenuActions () {
      this.arr.push('菜单(Actions)导入' + this.arr.length)
      // 相当于 this.$store.dispatch('menu/setMenu', this.arr)
      this.setMenuActions(this.arr)
    }
  },
  computed: {
    ...mapState({
      // 相当于 // this.$store.state.menu.menu
      getMenu: state => state.menu.menu,
      getUser: state => state.user.user
    })
  }
}
</script>

9.22 更新

pinia 模块化和命名空间使用

pinia 介绍

Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起，最初的原则仍然相同，但 Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。

官网: pinia官网

项目目录

新建 modules => common.js

import { defineStore } from "pinia"
import { getStore } from "@/utils/storage"
const useCommonStore = defineStore("/common", {
  state: () => ({
    yearNow: new Date(),
  }),
  getters: {},
  actions: {},
})
export default useCommonStore

新建 modules => user.js

import { defineStore } from "pinia"

const useAuthUserStore = defineStore("/user", {
  state: () => ({
    userInfo: JSON.parse(window.localStorage.getItem("userInfo") || "{}"),
    isLogged: false,
  }),
  getters: {},
  actions: {
    setUserInfo() {
       console.log("getUserInfo")
    },
  },
})
export default useAuthUserStore

新建 index.js

import useAuthUserStore from "./modules/user"
import useCommonStore from "./modules/common"

export { useAuthUserStore, useCommonStore }

使用方式

<script setup>
import { useAuthUserStore } from "@/store/index"
const { setUserInfo } = useAuthUserStore()

setUserInfo() // getUserInfo
</script>