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

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

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

我希望这个回答能对您有所帮助，大约 2 天前我还在为完全相同的问题而苦苦挣扎，这非常有效 ;)

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

Vue/Vuex - Load state from JSON file

json

webpack

vuex