Preface
Project requirements require vuex for routing persistent storage and recording with the nuxt framework.
Ideas
Monitor data changes, every time you log in,
vuex data changes, it is necessary to save the data to the browser local (refer to the user's browser localStorage)
When the page opens, it will try to restore the previously saved data to vuex.
A bit complicated, find a plugin to help
Realize cache information to local
nuxtjsAre storenot directly use the browser lcoalStoragemethod,
And it is more troublesome to write the data synchronization function by yourself,
So we need to rely on a plug-in vuex-persistedstate, the plug-in will store locally stored data store.
Introduction method
1. Installation
npm install vuex-persistedstate --save
nuxt.config.js configuration file
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. Use
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
}
};
The place to be stored in the project:
//将结果发送到刚刚新建的vuex中，存储，实现状态持久化，不然刷新之后数据就没了
this.$store.commit('userstore/setUserInfo',res.data)
Places that need to be used in the project:
computed:{
userInfo(){
return this.$store.state.userstore.userInfo
}
},
----------渲染头像-----------------
<el-dropdown v-if="userInfo.token">
<img :src="baseURL+userInfo.user.defaultAvatar"/>
{
{
userInfo.user.nickname}}
Restart the project after modification.
3. Step on the pit
The window is not defined problem may occur after the introduction:
-
Check if ssr is set to false in nuxt.config.js
Set the mode in nuxt.config.js to'spa'