代码之家 › 专栏 › 技术社区 › 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的数据时。

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前