Nuxtjs Vuex가 변경 내용을 저장하지 않음

Nuxtjs Vuex가 변경 내용을 저장하지 않음

세션 간에 저장된 데이터가 있는 경우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에 있고 돌연변이가 발생하지만 결국 데이터는 저장소에 저장되어 있지 않다.

어떤 도움이라도 좋겠지, 고마워!

이치에 맞지 않고 해결할 수 있는 몇 가지 사항

#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에서 작업 예시 사용 가능

로컬 스토리지에 저장하는 데 vuex-persistedstate를 사용할 수 있음

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

참조URL: https://stackoverflow.com/questions/64616785/nuxtjs-vuex-not-saving-changes