[JavaScript知识库]nuxt——vuex的使用

store/index.js内置

export const state = () => ({
    // 这里是全局数据保存的地方
    token:'', 
    userInfo: {},
})
// 修改state里面的函数必须用到mutations里面的函数
export const mutations = {
    setUserInfo(state, data) {
        // 每个 mutation 函数都可以接受到两个参数
        // 第一个是 state 对象本身
        // 第二是调用函数时额外添加的数据
        // 这里需要做的就是改变 state 数据
        // 这样外面调用这个函数, 并且传入数据, 即可改变当前的 userInfo 属性
        state.userInfo = data
        state.token = data.access_token
    },
    exit(state){
        state.userInfo = {}
        state.token = ''
    }
}

解决刷新vuex中数据丢失问题

// plugins/store-cache.js

export default function(ctx) {
    //离开页面 刷新前 将store中的数据存到localStorage
    window.addEventListener('beforeunload', () => {
      localStorage.setItem("storeCache", JSON.stringify(ctx.store.state))
    });
    // 获取localStorage中的store数据
    let storeCache = localStorage.getItem("storeCache")
    if (storeCache) {
      // 将localStorage中的store数据替换到store中
      ctx.store.replaceState(JSON.parse(storeCache));
    }
  }
  

// nuxt.config.js

plugins: [
    {src:'~/plugins/store-cache', ssr:false}
  ],

页面使用

import { mapState } from "vuex";
computed: {
    ...mapState(["token", "userInfo"]),
  },

bug

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing f

翻译：[Vue warn]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记造成的，例如在< p>中嵌套块级元素，或者缺少< tbody>

报错原因：服务端与客户端渲染的DOM结构不一样

解决方法

在组件最外层加上组件，该组件只是占位且用于仅在客户端渲染其他组件