Nuxtjs Vuex 不保存更改答案

【问题标题】：Nuxtjs Vuex not saving changesNuxtjs Vuex 不保存更改
【发布时间】：2020-10-30 22:58:00
【问题描述】：

我有保存在window.localStorage 中的会话之间的数据。当一个新会话开始时，插件会抓取数据并将其添加到存储中。

// ./store/data.js

export const state = () => ({
  data: []
})

export const mutations = {
  addItemToData (state, item) {
    state.data = state.data.push(item)
  },
  setData (state, data) {
    state.data = data
  },
}

// ./store/index.js

import localStorage from '../plugins/localStorage'

export const plugins = [localStorage]

// plugins/localStorage.js

const localStorage = store => {

  store.subscribe((mutation, state) => {

    if (mutation.type === 'data/addItemToData') {
      console.log('saving added item to storage')
      window.localStorage.setItem('data', JSON.stringify(state.data.data))
    }

  })

  // called when the store is initialized
  if (typeof window !== 'undefined') {
    if (window.localStorage.data) {
      store.commit('data/setData', JSON.parse(window.localStorage.getItem('data')))
    }
  }
}

export default localStorage

我已经投入了各种控制台语句，它们似乎都输出了它们应该输出的内容。数据在 localStorage 中，突变正在触发，但毕竟数据不在存储中。

任何帮助都会很棒，谢谢！

【问题讨论】：

标签： javascript vue.js nuxt.js vuex

【解决方案1】：

一些没有意义但你可以解决的事情

#1

addItemToData (state, item) {
  state.data = state.data.push(item)
}

Array.push() 不返回任何内容，所以应该写成

addItemToData (state, item) {
  state.data.push(item)
}

#2

在您的localStorage.js 文件中，当您初始化数据存储时，您假设存在data 变量：

if (window.localStorage.data) { ...

但在您显示的代码中永远不会存在，因为您正在将数据添加到另一个变量

window.localStorage.setItem('cart', ...

将cart 更改为data 或将data 更改为cart

#3

如果仍然无法正常工作，我怀疑您的插件在 store 实际初始化之前正在运行，为此，请确保您等待片刻，然后再尝试使用 localStorage 数据填充存储

类似

   ...
   if (window.localStorage.data) {
     setTimeout(() => {
       store.commit('data/setData', JSON.parse(window.localStorage.getItem('data')))
     }, 500)
   }

Netlify 上提供了工作示例，GitHub 上提供了代码

【讨论】：

对不起，我从代码中复制了这个并更改了一些名称，看起来我错过了一些。我会编辑帖子。
Git 上提供的代码，Netlify 上的工作示例......只需添加一些数据，然后刷新页面......你会看到它将从本地存储中读取
所以解决方案 3 奏效了。不过，我不喜欢像那样等待一些任意的时间。关于如何检查商店是否已初始化的任何想法？
你现在有一个很好的基础，试着自己找出你还能做什么......记住 NuxtJs 社区也可以在 Discord 和 Twitter 上找到

【解决方案2】：

你可以使用 vuex-persistedstate 保存在本地存储中

【讨论】：

【解决方案3】：

Array.push 插入后返回数组的length，在您的情况下，当您进行突变时，它会将data 数组覆盖为Number。像下面这样..

export const state = () => ({
  data: []
})

export const mutations = {
  addItemToData (state, item) {
    state.data.push(item)
    // OR 
    state.data = [...state.data, item]
  },
  setData (state, data) {
    state.data = data
  },
}

还要确保您在 localStorage 中有数据。

 try { // handles if any parsing errors
   const data = JSON.parse(window.localStorage.getItem('data')
   store.commit('data/setData', data)
 } catch(err) {
   console.log('JSON parsing error', err)
 }

【讨论】：