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

2022-05-05 18:03:12 阅读：1186 来源： 互联网

标签：存储 const curUsername state pinia Vue3 import store

一、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使用及注意事项

无更改state状态值操作，getters获取即可；需要更改state状态值，不能使用getters
组件视图需要更新，应该使用响应式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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9