前言
项目需求,需要vuex进行路由持久化保存,结合nuxt框架进行记录。
思路
监听数据变化, 每当登录完毕,
vuex 数据发生变化,就要将数据保存到浏览器 本地 (指用户浏览器localStorage)
页面打开时, 会尝试将之前保存过的数据恢复到 vuex 当中即可
有点复杂, 找个插件帮忙
实现缓存信息到本地
nuxtjs
中store
不能直接使用浏览器的lcoalStorage
方法,
而且自己写数据同步功能比较麻烦,
所以我们需要依赖一个插件vuex-persistedstate
,该插件会把本地存储的数据存储到store
。
引入方法
1. 安装
npm install vuex-persistedstate --save
nuxt.config.js配置文件
plugins: [
'@/plugins/element-ui',
// '@/plugins/localStorage'
// 这里的引入, 如果是普通字符串, 就在服务端马上运行
// 如果是要等到浏览器再运行的代码可以将配置改为对象, 并且 路径作为 src 传进去
{
src: '@/plugins/localStorage',
// 如果只在浏览器加载的代码, 可以添加一个 属性 ssr: false
ssr: false
}
],
plugins/localStorage.js
console.log('测试自定义插件')
// 在这个自定义插件中配置 vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
// 这里什么都可以写, 不过如果你需要用到 nuxt 本身, 必须通过 export 的方式暴露函数来接收
export default ({
store}) => {
// 如果想要等到 nuxt 加载完毕
// 再执行代码, 有一个函数叫做 window.onNuxtReady()
window.onNuxtReady(()=>{
createPersistedState({
// 在这里其实, 是想要将 vuex 数据存放到 localStorage 里面
key: 'store'
})(store)
})
}
2. 使用
store/index.js
// 用户管理
export const state = () => ({
//采用接口返回的数据结构
userInfo: {
// token: '',
// user: {}
}
})
// 测试
// export const state = () => {
// return {
// // 这里是全局状态数据保存的地方
// abc: 123
// }
// }
// 修改 state 里面的数据, 必须使用 mutations 里面的函数
export const mutations = {
// 每个属性都是一个函数, 作为修改 state 的方法
// setAbc(state, data) {
// 每个 mutation 函数都可以接受到两个参数
// 第一个是 state 对象本身
// 第二是调用函数时额外添加的数据
// 这里需要做的就是改变 state 数据
// state.abc = data
// 这样外面调用这个函数, 并且传入数据, 即可改变当前的 abc 属性
setUserInfo(state, data) {
state.userInfo = data
}
};
项目中需要存储的地方:
//将结果发送到刚刚新建的vuex中,存储,实现状态持久化,不然刷新之后数据就没了
this.$store.commit('userstore/setUserInfo',res.data)
项目中需要使用的地方:
computed:{
userInfo(){
return this.$store.state.userstore.userInfo
}
},
----------渲染头像-----------------
<el-dropdown v-if="userInfo.token">
<img :src="baseURL+userInfo.user.defaultAvatar"/>
{
{
userInfo.user.nickname}}
修改完后重新启动项目即可。
3.踩坑
引入后可能出现window is not defined 问题:
-
检查nuxt.config.js中是否将ssr置为false
将nuxt.config.js中mode设置为’spa’