Vue/Vuex - JSON 파일에서 로드 상태

Vue/Vuex - JSON 파일에서 로드 상태

vue-cli webpack 템플릿에서 Vue/Vuex를 사용하여 간단한 앱을 빌드하려고 합니다.앱은 정상적으로 동작하지만 상태를 로드하여 JSON 파일로 저장할 수 있는 기능을 추가하고 싶습니다.그것을 하기 위한 베스트 프랙티스가 있나요?

처음에 생각한 것은 데이터를 파일 스토어에 읽어 들이는 것이었습니다.js

import Vue from 'vue'
import Vuex from 'vuex'
import fs from 'fs'

// Read file
let loaded = null

fs.readFile('./data.json', 'utf8', (err, data) => {
    if (err) throw err;
    loaded = data;
})

Vue.use(Vuex)

const state = {
    notes: loaded,
    activeNote: {}
}

...
...

그런데 fs 모듈을 Import하려고 하면 오류가 발생합니다.

고객의 요구에 딱 맞는 뛰어난 플러그인이 준비되어 있습니다.기본적으로 Vuex를 사용하고 상태를 정의하는 것은 그가 할 수 있는 일입니다만, 조금 다른 방법을 사용해야 합니다.이 플러그인을 확인합니다.

https://github.com/robinvdvleuten/vuex-persistedstate

웹 팩을 사용하고 있기 때문에, 인스톨이 꽤 간단합니다.yarn add vuex-persistedstate예를 들어..

다음으로 플러그인을 Import 합니다.import createPersistedState from 'vuex-persistedState'.

이제 상점을 조금 바꿔서 다음과 같은 작업을 수행합니다.

export const store = new Vuex.Store({
  state: {
    yourVar: 0    
  },
  mutations: {
    changeValue (state, number) {
      state.yourVar += number
    }
  },
  plugins: [createPersistedState()]
})

그게 다에요.필요한 것은, 다음의 주소의 추가뿐입니다.pluginVuex 스토어 및 내부 모든 변수 데이터에 대한 회선state브라우저에 저장됩니다.localStorage디폴트입니다.물론 GitHub 저장소를 통해 세션, 쿠키 등을 어떻게 사용할 수 있는지 확인할 수 있지만, 그것은 정상적으로 작동합니다.

여기서 중요한 것은 돌연변이입니다. 왜냐하면 당신이 원하는 모든 것은 당신의 변이이기 때문입니다.store변수는 변환 함수에 의해 선언되어야 합니다.일반 함수를 사용하여 저장된 변수를 수정하려고 하면 경고가 표시됩니다.그 이유는 데이터의 예기치 않은 변환이 발생하지 않도록 하기 위해서입니다.따라서 변수를 변경하기 위해서는 프로그램에서 허용하는 것을 명시적으로 정의해야 합니다.

또,export const store전에new Vuex.Store임의의 Vue 컴포넌트로 그 상태를 Import하여 변환함수를 호출할 수도 있습니다.store.commit('changeValue', number).

이 답변이 조금 도움이 되었으면 합니다.저는 이틀 전 같은 문제로 고민하고 있었습니다만, 이것은 매우 효과가 있습니다.

언급URL : https://stackoverflow.com/questions/42691523/vue-vuex-load-state-from-json-file