代码之家 › 专栏 › 技术社区 › MaratSR

在vuex中创建操作的正确方法

vuex vue.js javascript

MaratSR · 技术社区 · 6 年前

这就足够创造了吗 易于理解的 (不链接then/catch调用)vuex操作是否为a1?或者我需要每次都写下承诺创建为a2(+还添加拒绝分支)?

提前谢谢你。。。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({
    state: { ... }
    ...
    actions: {
        a1: (state, response) => {
            state.commit('setNavMenu',{signIn: true, signUp: true, signOut: false});
        ...        
        },
        a2: (state, response) => {
            return new Promise((resolve) => {
                state.commit('setNavMenu',{signIn: true, signUp: true, signOut: false});
            ...
            resolve();
            });
        },        

...

2 回复 | 直到 6 年前

Eddo 6 年前

可以像第一个一样创建同步操作(没有承诺或其他异步代码) a1

然而,你可以直接调用突变函数,在 a1 如果是这样的话 setNavMenu . 动作和突变之间的主要区别在于,当突变不能时,动作可以是异步的,基本上如果不需要动作来执行异步的话。代码,你不需要一个动作,只需执行变异即可。

有关更多详细信息,请查看官方行动文件 https://vuex.vuejs.org/en/actions.html

Daniel 6 年前

如果没有,则仅当操作具有异步方面或希望从您的操作中获得响应时才会这样做。

如果您的所有更新都是同步的(不依赖API或任何异步反馈),您甚至可以直接调用突变,完全跳过这些操作。

i、 e.(来自官方文件)

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // map `this.increment()` to `this.$store.commit('increment')`

      // `mapMutations` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // map `this.add()` to `this.$store.commit('increment')`
    })
  }
}

你为什么将使用一个动作是当你正在处理一个异步变化时,比如当你想让你的变异使用来自API的数据时。