Question

我在会话之间有保存在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中，正在触发突变，但毕竟这些数据不在存储中。

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

Answer 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提供了代码

Answer 2

您可以使用vuex-persistedstate来保存本地存储

Answer 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)
 }

Nuxtjs Vuex不保存更改

3 个答案:

＃1

＃2

＃3