vue3中使用pinia、pinia-plugin-persist解决刷新store数据丢失问题
vue3 pina pinia-plugin-persist
·
*
## 注意:**pinia-plugin-persist要触发actions里的方法才会生效**
*
import {defineStore,} from 'pinia'
import {setCookie,removeCookie} from '@/utils/cookie'
export const userStore = defineStore('main', {
state: () => ({
user: {
username: "",
password: ""
},
username: "",
password:""
}),
persist: {
enabled: true,
strategies: [{
storage: localStorage,//localStorage存储多个key
paths: ['user'],
key: "user"
}, {
storage: localStorage,
paths: ['password'],
key: "password"
},{
storage: sessionStorage,//sessionStorage存储多个key
paths: ['password'],
key: "password"
}, {
storage: sessionStorage,
paths: ['username'],
key: "username"
}],
},
getters: {
getUser: (state) => {
return state.user
},
},
actions: {
Login(data) {
return new Promise((resolve, reject) => {
this.user = {
...this.user,
...data
}
this.username = data.username
this.password = data.password
setCookie('token', data.username)
resolve()
})
},
LoginOut(data) {
console.log(this, data, "+this")
return new Promise((resolve, reject) => {
this.user = {}
this.username = ""
this.password = ""
removeCookie("token");
resolve()
})
},
}
})
//main.js
import {
createApp
} from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import * as utils from './utils/index'
import piniaPluginPersist from 'pinia-plugin-persist';
import {
createPinia
} from 'pinia'
const pinia = createPinia();
pinia.use(piniaPluginPersist);
let app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(router).use(ElementPlus).use(pinia)
app.config.globalProperties.$utils = utils
app.mount('#app')



DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)