Vue/Vuex - 从 JSON 文件加载状态答案

【问题标题】：Vue/Vuex - Load state from JSON fileVue/Vuex - 从 JSON 文件加载状态
【发布时间】：2017-07-30 05:06:15
【问题描述】：

我正在尝试从 vue-cli webpack 模板开始使用 Vue / Vuex 构建一个简单的应用程序。该应用程序运行良好，但我想添加在 JSON 文件中加载和保存状态的可能性。是否有最佳做法可以做到这一点？

我的第一个想法是将数据读入文件 store.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 模块时出现错误。

【问题讨论】：

您需要使用npmjs.com/package/browserify-fs 或其他可以使其可用的东西。
为了解释错误，fs 是一个 Node.js 模块，通常在浏览器中加载 Vue。

标签： json webpack vuex

【解决方案1】：

有很多很棒的插件可用于您正在尝试做的事情。基本上，拥有 Vuex 并定义一个状态是他要走的路，但是，你应该做一些不同的事情。看看这个插件：

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

因为您使用的是 Webpack，所以它很容易安装，例如使用 yarn add vuex-persistedstate..

然后，您使用import createPersistedState from 'vuex-persistedState' 导入插件。

现在你稍微改变一下你的商店，做这样的事情：

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

基本上就是这样。您需要做的就是将plugin 行添加到您的Vuex 存储中，您state 中的所有变量数据将默认保存在浏览器localStorage 中。当然，您可以通读 GitHub 存储库以了解如何使用会话、cookie 等，但这应该可以正常工作。

这里的重要部分是你的突变，因为你想用你的 store 变量做的所有事情都必须由突变函数声明。如果您尝试使用普通函数修改存储的变量，您会收到一些警告。这背后的原因是为了确保您的数据不会发生意外的变化，因此您必须明确定义您希望程序接受的内容才能更改变量。

此外，在 new Vuex.Store 之前使用 export const store 允许您在任何 Vue 组件中导入该状态，并使用 store.commit('changeValue', number) 从那里调用变异函数。

我希望这个答案对您有所帮助，大约 2 天前我正在为完全相同的问题苦苦挣扎，这就像一个魅力；）

【讨论】：