Vue3中pinia使用及状态持久化存储

一、pinia基本使用

1.安装pinia

 npm install pinia

2.main.js注册

import { createPinia } from 'pinia'

app.use(createPinia())

3.定义store

　　创建src/store/index.js

import { defineStore } from 'pinia'
export const useCommentStore = defineStore('comment', {
    // 静态数据
    state: () => {
        return {
            curCommentlist: []
        }
    },
    // 相当于计算属性(有数据缓存)
    getters: {
        getCurCommentlist(state) {
            return state.curCommentlist
        }
    },
    // actions即可以是同步函数也可以是异步函数
    actions: {
        changeCommentlist(curCommentlist) {
            this.curCommentlist = curCommentlist
        },
    }
})

4.页面使用

// 引入pinia仓库
import store from '../stores/index'
import { storeToRefs } from 'pinia'
const { useLoginStore, useCommentStore } = store
const commentStore = useCommentStore()
const curUsername = useLoginStore().getCurUsername // 无需赋值操作，getters获取即可
const { curCommentlist } = storeToRefs(commentStore) // 需要赋值，不能使用getters

二、state修改方式

大致有如下四种修改state状态值的方式

// 引入pinia仓库
import { useLoginStore } from '../stores/loginStore.js'
import { storeToRefs } from 'pinia'
const loginStore = useLoginStore()
const { curUsername } = storeToRefs(loginStore)
const router = useRouter()
const formState = reactive({
    username: '',
    password: '',
    remember: true,
});
const onFinish = (values) => {
    const { username } = values
    // localStorage.setItem('username', username) // 改为如下pinia存储状态

    // pinia start
    // 方式一：最简单的方法，如下
    // 解构后更改方式
    curUsername.value = username;
    // 解构前更改方式
    // loginStore.curUsername = username;

    // 方式二：若要同时修改多个数据，建议使用$patch来实现批量更新，在内部做了优化
    // loginStore.$patch({
    //     curUsername: username
    // })

    // 方式三：更好的批量更新方法，通过$patch传递一个函数来实现，这里的state就是useLoginStore容器中的state
    // loginStore.$patch((state) => {
    //     state.curUsername = username
    // });

    // 方式四：通过 actions 来修改数据
    // loginStore.changeCurUsername(username);
    // pinia end

    router.push('/commentOn')
};

三、getters使用及注意事项

1. 无更改state状态值操作，getters获取即可；需要更改state状态值，不能使用getters
2. 组件视图需要更新，应该使用响应式api storeToRefs；视图无需依赖state更新直接用getters获取state即可

// pinia 获取列表
import { storeToRefs } from 'pinia'
import store from '../stores/index.js'
const { useLoginStore, useCommentStore } = store
const curUsername = useLoginStore().getCurUsername // 视图无需依赖更新使用getters获取即可
const commentStore = useCommentStore() 
const { curCommentlist } = storeToRefs(commentStore) // 页面视图更新需要使用响应式

四、pinia持久化存储

1.手动利用localStorage或sessionStorage进行存储

// 不使用pinia-plugin-persist进行持久化操作
// 通过 store 的 $subscribe() 方法查看状态及其变化；subscriptions 只会在 patches 之后触发一次
// useLoginStore().$subscribe((mutation, state) => {
//     // import { MutationType } from 'pinia'
//     mutation.type // 'direct' | 'patch object' | 'patch function'
//     // 与 loginStore.$id 相同
//     mutation.storeId // 'login'
//     // 仅适用于 mutation.type === 'patch object'
//     mutation.payload // 补丁对象传递给 to loginStore.$patch()
//     console.log('mutation', mutation);
//     // 每当它发生变化时，将整个状态持久化到本地存储
//     localStorage.setItem('login', JSON.stringify(state))
// })

// 1. 保存数据
const instance = useLoginStore();
instance.$subscribe((_, state) => {
    localStorage.setItem('login-store', JSON.stringify({ ...state }));
});
// 2. 获取保存的数据，先判断有无，无则用先前的
const old = localStorage.getItem('login-store');
if (old) {
    instance.$state = JSON.parse(old);
}

2.利用持久化工具 pinia-plugin-persist

• 安装

npm i pinia-plugin-persist --save

• main.js引入

// 引入pinia仓库
import { createPinia } from 'pinia'
// 持久化存储pinia
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)

const app = createApp(App)

app.use(store)

• store中的配置参数 persist

import { defineStore } from 'pinia'

export const useLoginStore = defineStore('login', {
    // 静态数据
    state: () => {
        return {
            token: '',
            curUsername: '',
        }
    },
    persist: {
        enabled: true,
        // 自定义持久化参数
        strategies: [
            {
                // 自定义key
                key: 'login_store',
                // 自定义存储方式，默认sessionStorage
                storage: localStorage,
                // 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
                paths: ['curUsername'],
            }
        ]
    },
    // 相当于计算属性(有数据缓存)
    getters: {
        getCurUsername(state) {
            return state.curUsername
        },
    },
    // actions即可以是同步函数也可以是异步函数
    actions: {
        changeCurUsername(curUsername) {
            this.curUsername = curUsername
        },
    }
})

 

标签：存储,const,curUsername,state,pinia,Vue3,import,store
来源： https://www.cnblogs.com/younghxp/p/16225717.html