javascript - Vuex和mysql连接对象: Do not mutate vuex store state outside mutation handlers

Question

我有一个电子应用程序，它使用 mysql 包直接连接到我的数据库。我想做的是将使用 mysql.createConnection() 创建的 connection 对象存储在 Vuex 状态中。然后我想使用这个对象从数据库中获取一些数字。

我得到了 Vuex 商店的代码:

const state = {
  connectionObject: null,
  numbers: [],
};

const getters = {
  getNumbers: state => state.numbers,
  getConnectionObject: state => state.connectionObject,
};

const mutations = {
  SET_NUMBERS(state, numbers) {
    state.numbers = Object.assign({}, numbers);
  },
  SET_CONNECTION_OBJECT(state, connection) {
     state.connectionObject = connection;
  },
};

const actions = {
  fetchNumbers({ state, commit }) {
    const connection = _.cloneDeep(state.connectionObject);
    connection.query({
      sql: 'SELECT * FROM `numbers`',
      timeout: 40000,
    }, async (error, results) => {
      if (error instanceof Error) {
        throw new Error(error);
      }
      commit('SET_NUMBERS', await results);
    });
  },
  connectToDatabase({ commit }, data) {
    const connection = mysql.createConnection(data);
    return new Promise((resolve, reject) => {
      connection.connect(async (err) => {
        if (err) {
          return reject(err);
        }
        commit('SET_CONNECTION_OBJECT', await connection);
        commit('SET_DB_CONNECTION_STATE', data);
        return resolve(connection);
      });
    });
  },
};

发生的情况是，一旦我运行代码，我得到观察者回调中的错误“function () { return this._data.$$state }”:“错误:[vuex]不要在外部改变vuex存储状态突变处理程序。” 并且在执行 connection.query() 时抛出此错误。

我很难理解为什么它不起作用，因为我毕竟从状态克隆了 connectionObject 。看起来它的观察者也被克隆了。有办法避免吗？

Answer 1

连接对象高度可变，无法存储。您建立的每个连接都会更改连接对象的属性。我只会将返回值存储在存储中，将数据更新到操作中，并且连接对象应该可以跨 vuex 访问，但要注意使其全局化，这将使您的应用程序更容易被黑客攻击。使其可访问的一种方法是简单地将其声明为除状态之外的变量。

如果您需要进一步的建议，最好知道您使用的是哪个 SQL 包，以便为您提供一些代码。