本文正在参加「金石计划 . 瓜分6万现金大奖」

pinia官方文档 pinia.vuejs.org/zh/

pinia模块化如何实现?

pinia相比vuex没有modules,那么如何实现模块化呢?

在复杂项目中，不可能把多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合

假设我们目前store中有两个模块user.js和counter.js,我们再手动设置一个index.js

1.我们在index.js中导入user.js和counter.js,

2.并统一导出useStore方法,返回user和counter中的内容

import useCounterStore from './counter.js'
import useUserStore from './user.js'

export default function useStore(){
    return {
        user:useUserStore(),
        counter:useCounterStore()
    }
}

3.那么如何在组件中具体使用呢?

首先从store/index.js导入useStore方法

由于使用useStore方法会返回一个对象,对象中有user和counter,

我们使用解构赋值可以从useStore方法得到具体的某个模块

注意:import useStore from './store' 虽然没有在后面加上/index.js,但是会默认选中文件夹下的index.js

<script setup>
import useStore from './store'
const { counter } = useStore()
</script>

<template>
    <div>主页组件</div>
    <div>计数:{{ counter.count }}</div>
    <div>计数加倍: {{ counter.double }}</div>
</template>

vuex中实现模块化的方法

1.把各个模块导入index.js 2.把所有模块名放到mudules下

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import menu from './modules/menu'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    menu
  },
  getters
})

export default store

pinia如何实现数据持久化?

我们可以通过通过 Pinia 插件pinia-plugin-persistedstate实现持久化存储

配置pinia持久化插件

1.下载安装pinia-plugin-persistedstate

2.main.js导入pinia-plugin-persistedstate创建对象并挂载

3.在具体的pinia模块中开启持久化

下载安装插件

yarn add pinia-plugin-persistedstate
or
npm i  pinia-plugin-persistedstate

在main.js中导入并且注册挂载

// 配置pinia持久化插件
// 1.下载安装pinia-plugin-persistedstate
// 2.main.js导入pinia-plugin-persistedstate创建对象并挂载
// 3.在具体的pinia模块中开启持久化
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

createApp(App).use(pinia).mount('#app')

注意:当createApp(App)需要挂载多个时

createApp(App).use(router).use(pinia).mount("#app")

在具体的pinia模块中开启持久化

在user.js中设置 persist: true

import {defineStore} from 'pinia'

const useUserStore = defineStore('user',{
    state(){
        return {
            userInfo:{
                name:'tom',
                age:4
            }
        }
    },
    actions:{
        addAge(){
            this.userInfo.age++
        }
    },
    getters:{
        
    },
    //开启数据持久化
    persist: true
})

export default useUserStore

实现效果,state数据存储在了LocalStorage中

总结

• pinia相比vuex有许多优化比如取消了mutations,同步异步修改数据都在actions中进行
• 但是pinia取消了modules,我们可以手动实现模块化,导入把所有模块导入index.js,函数返回一个对象
• pinia实现持久化方法有许多种,此处使用插件比较简单