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']
      }
    ]
  }
})
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值