pinia的持久化存储,pinia使用插件进行持久化存储。

1.安装pinia持久化插件
npm i pinia-plugin-persist -S
优化1:pinia放在main.js中让主文件显得有一些臃肿,那么我们现在先处理这个问题
1.在src目录的store文件下新建一个index.js文件,写入如下内容,对插件进行注册使用
import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
// 使用该插件
store.use(piniaPluginPersist)

//导出
export default store
2.在main.js中进行注册
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store'
const app = createApp(App)

app.use(store).use(router).mount('#app')
3.在store文件夹下新建一个test.js文件,让我们来使用持久化插件
import { defineStore } from 'pinia'
import axios from 'axios'
export default defineStore('main', {
  state: () => {
    return {
      count: 10,
      name: '何志伟',
      list: [{
        name: 'ipone',
        price: 5800,
        count: 1
      },
      {
        name: 'huawei',
        price: 5800,
        count: 2
      }],
      timuList: []
    }
  },
  // 使用该插件,开启数据缓存
  persist: {
  //这里存储默认使用的是session
    enabled: true,
    strategies: [
      {
        //key的名称
        key: 'my_user',
        //更改默认存储,我更改为localStorage
        storage: localStorage,
        // 可以选择哪些进入local存储,这样就不用全部都进去存储了
        // 默认是全部进去存储
        paths: ['list']
      }
    ]
  }
})
  • 2
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
Pinia提供了一种自定义件的方式来实现持久存储。你可以编写一个件来将Pinia的状态存储在本地存储中,比如localStorage或sessionStorage。你可以使用Pinia的`createPinia`函数创建一个Pinia实例,并使用`pinia.use`方法来安装件。在件的`install`方法中,你可以读取本地存储中的状态,并将其恢复到Pinia的状态中。然后,你可以使用`pinia.state.subscribe`方法来监听Pinia状态的变,并将其保存到本地存储中。 以下是一个示例代码,将Pinia的状态存储在localStorage中: ```javascript import { createPinia } from 'pinia'; const pinia = createPinia(); pinia.use({ install(app) { const storageKey = 'pinia-state'; // 从本地存储中读取状态 const storedState = localStorage.getItem(storageKey); if (storedState) { // 将本地存储的状态转换为 JSON const parsedState = JSON.parse(storedState); // 恢复存储的状态 pinia.state.value = parsedState; } // 监听Pinia状态的变并将其保存到本地存储 pinia.state.subscribe(newState => { localStorage.setItem(storageKey, JSON.stringify(newState)); }); }, }); ``` 你也可以使用第三方库`vuex-persistedstate`来实现Pinia持久存储。你可以使用`createPersistedState`函数创建一个持久件,并将其传递给`pinia.use`方法。你可以通过指定`storage`参数来选择要使用的本地存储,默认为`window.localStorage`。以下是一个示例代码,将Pinia的状态存储在sessionStorage中: ```javascript import { createPinia } from 'pinia'; import createPersistedState from 'vuex-persistedstate'; const pinia = createPinia(); pinia.use(createPersistedState({ storage: window.sessionStorage, key: 'pinia', })); ``` 除了使用件,你还可以使用Pinia的Options式写法来自定义持久。你可以使用`defineStore`函数来定义一个store,并在`state`选项中返回一个包含状态的对象。然后,你可以在件中使用`pinia.use`方法来安装持久件。以下是一个示例代码: ```javascript import { defineStore } from 'pinia'; export const useStudyStore = defineStore('studyId', { state: () => { return { counter: 0, }; }, getters: {}, actions: {}, }); ``` 希望以上信息对你有所帮助! #### 引用[.reference_title] - *1* *2* [Pinia实现持久保存数据](https://blog.csdn.net/weixin_53156345/article/details/130972351)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [快速搞懂Pinia及数据持久存储(详细教程)](https://blog.csdn.net/G_ing/article/details/128192480)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值