时间戳

首页 > 解决方案 > 正确设置和使用 VUEX 存储突变类型

vue.js - 正确设置和使用 VUEX 存储突变类型

问题描述

我正在使用来自 Github 的 Vue js 样板之一开发 Chrome 扩展。默认样板设置如下：

存储/index.js

import Vue from 'vue';
import Vuex from 'vuex';

import mutations from './mutations';
import * as actions from './actions';    // all actions are imported as separate vars

Vue.use(Vuex);

export default new Vuex.Store({
    state: {    },
    mutations,
    actions
});

然后在actions.js

import * as types from './mutation-types';

export const setFoo = ({ commit }, payload) => {
    commit(types.SET_FOO, payload);    // SET_FOO is defined in the mutation-types file
};

我认为上述方法缺乏我们要使用突变类型文件的根本原因——避免重新输入突变和动作的名称。

所以相反，我想出了一个不同的方法：

存储/index.js

...
import actions from './actions';    // actions are imported as separate functions
...

然后在actions.js

import * as types from './mutation-types';

export default {
    [types.UPDATE_FOO] ({commit}, payload) {
        commit(types.UPDATE_FOO, payload);
    }
}

然后在扩展中的任何地方，我们还可以使用 const 名称导入突变类型和调度操作，如下所示：

store.dispatch(types.UPDATE_FOO, 'some value');

第二种方法在命名然后调度/提交我们的动作/突变方面似乎更实用。或者最新的有什么问题吗？

以上哪一项通常是更好的做法？

标签： vue.jsvuex

解决方案

第一种方法更可取，但这完全取决于您。Vuex官方文档 中使用了类似的方法。参考

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // we can use the ES2015 computed property name feature
    // to use a constant as the function name
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

// actions.js
actions: {
  checkout ({ commit, state }, products) {
    // save the items currently in the cart
    const savedCartItems = [...state.cart.added]
    // send out checkout request, and optimistically
    // clear the cart
    commit(types.CHECKOUT_REQUEST)
    // the shop API accepts a success callback and a failure callback
    shop.buyProducts(
      products,
      // handle success
      () => commit(types.CHECKOUT_SUCCESS),
      // handle failure
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

推荐阅读