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

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

vuex vue.js javascript

MaratSR · 技术社区 · 7 年前

这就足够创造了吗 易于理解的 (不链接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 回复 | 直到 7 年前

Eddo 7 年前

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

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

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

Daniel 7 年前

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

如果您的所有更新都是同步的(不依赖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的数据时。

推荐文章

base · 单击按钮时,如何从父组件打开位于子组件中的模态?

4 月前

Ben Foltz · 更新/删除递归子组件

5 月前

Andy BnOne · 我可以为泛型类型的道具设置默认值吗

5 月前

Felix · 更改vuetify v-field标签字体大小

6 月前

user2263572 · Vue.js在脚本与模板中调用util时的不同功能(以及考虑模板解包)

6 月前

CentralDev · 如何导出和导入js文件?

9 月前

Michael · 在Nuxt/Vue中安装传单的正确方法

9 月前

gespinha · 当元素不再可见时,如何更改ref元素?

10 月前

Brad · Vue Child组件对检索到的pinia/vueFire对象失去反应性

10 月前

gespinha · 使用Vue Router时,路由参数不会在Vue组件内渲染

11 月前