localStorage 在nuxt.js 中如何保存 store state的部分数据

在 Nuxt.js 中，您可以使用 Vuex 插件 `vuex-persistedstate` 来保存 Vuex store 的部分数据到本地存储中。以下是使用步骤：

1. 安装 `vuex-persistedstate` 插件：

npm install vuex-persistedstate

2. 在 Vuex store 中导入 `createPersistedState`：

import createPersistedState from 'vuex-persistedstate'

3. 在 Vuex store 中的 plugins 数组中使用 `createPersistedState`：

plugins: [
  createPersistedState({
    key: 'my-key', // 保存到本地存储中的键名
    paths: ['myModule.myData'] // 需要保存的 state 数据路径，以 '.' 分隔
  })
]

在上述示例中，我们将 `myModule.myData` 的 state 数据保存到本地存储中，键名为 `my-key`。您可以根据自己的需求修改键名和需要保存的 state 数据路径。

相关问题

怎么在nuxt.js的asyncData中拿到本地存储的数据

在nuxt.js的asyncData中可以通过以下方式拿到本地存储的数据：

1. 在asyncData函数中使用window对象获取本地存储的数据，如下所示：

async asyncData({req}) {
  let data = null
  if (process.client) {
    data = window.localStorage.getItem('data')
  } else {
    data = req.session.data
  }
  return { data }
}

2. 在nuxt.js中，可以使用插件来在客户端和服务端之间共享数据。使用插件的方法如下：

- 创建一个插件文件，比如localStorage.js，然后在其中定义一个名为$localStorage的插件：

export default ({ app, store }) => {
  app.$localStorage = {
    getItem(key) {
      return process.client ? window.localStorage.getItem(key) : store.state[key]
    },
    setItem(key, value) {
      process.client ? window.localStorage.setItem(key, value) : store.commit('set', { key, value })
    }
  }
}

- 在nuxt.config.js中注册插件：

module.exports = {
  plugins: [
    { src: '~/plugins/localStorage.js'}
  ]
}

- 在asyncData函数中使用插件获取本地存储的数据：

async asyncData({ app }) {
  const data = app.$localStorage.getItem('data')
  return { data }
}

注意：如果在服务端渲染时使用window对象，会导致程序崩溃，因此需要在代码中判断当前是否处于客户端环境，并且在服务端时使用其他方式获取数据。

nuxtjs中怎么获取localstorage

您可以通过在Nuxt.js组件中使用$accessor属性来获取localStorage，例如：

//页面中
export default {
mounted() {
console.log(this.$accessor.storage.getItem('key'))
}
}

//在store中
export const state = () => ({
storage: localStorage
})