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: {
enabled: true,
strategies: [
{
key: 'my_user',
storage: localStorage,
paths: ['list']
}
]
}
})