Question

我正在尝试使用Vue / Vuex从vue-cli webpack模板开始构建一个简单的应用程序。该应用程序工作正常，但我想添加加载和保存状态在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模块时出现错误。

Answer 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变量做的一切都必须通过变异函数来声明。如果您尝试使用普通函数修改存储的变量，则会收到一些警告。这背后的原因是为了确保不会发生意外的数据变异，因此您必须明确定义您希望程序接受哪些内容才能更改变量。

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

我希望这个答案会帮助你一点点，我在2天前就遇到了同样的问题，这就像魅力一样;）

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

1 个答案: