Vuejs2 VueJs+；Vuex+；地图行动

在文档中，写着除了通过操作调用的突变之外，状态是不可变的。。。嗯

我在我的组件中使用MapGetter、mapActions

商店：

export default {
  namespaced: true,

  state: {
    color: "violet"
  },
  mutations: {
      changeColor(state, newColor) {
          state.color = newColor
      },
  },
  actions: {
    changeColor({ commit }, newColor) {
      commit('changeColor', newColor)
  }
 }

组成部分：

...
methods: {
    ...mapActions({
      setColor: 'store/changeColor',
    }),
    myMethodCallByButton(){
       this.setColor("blue").then(response => {
          console.log("change Color done")
       },err => {
          console.log("change Color error")
       })
    }
...

该方法工作正常，存储已更新，只是我从未收到console.log（）

文档中写到mapActions与此等效。$store.dispatch

• 为什么我没有得到这个信息
• 还有别的解决办法吗

PS：我想保留mapGetters地图，mapActions。。我不喜欢打这个电话。$store.dispatch

PS2：我在商店里使用模块

---

谢谢

每个Vuex操作都会返回一个

承诺

Vuex。因此，

changeColor

操作在：

操作：{
changeColor（{commit}，newColor）{
myAsyncCommand（）；
}
}

返回一个

承诺

，该承诺解析为

未定义

，并且不会等待完成

myasyncommand（）

的异步代码（如果它不包含异步代码，则无需等待）

这是因为上面的代码与以下代码相同：

changeColor（{commit}，newColor）{
myAsyncCommand（）；
返回未定义；
}

当

.dispatch（'changeColor'，…）

Vuex将返回

Promise.resolve（未定义）

如果希望操作返回的

Promise

等待，则应返回一个

Promise

，该Promise本身不会等待。大致如下：

changeColor（{commit}，newColor）{
返回新承诺（（解决、拒绝）=>{
myAsyncCommand（）。然后（解析）；
});
//或者，简单地说：返回myAsyncCommand（）；
}

下面是演示实现，并提供了更多详细信息：

const myStore={
名称空间：对，
国家：{颜色：“紫色”}，
突变：{
更改颜色（状态，新颜色）{
state.color=newColor
}
},
行动：{
changeColor_SIMPLE（{commit}，newColor）{
提交（'changeColor'，newColor）
},
changeColor\u复杂\u无承诺（{commit}，newColor）{
设置超时（（）=>{
提交（'changeColor'，newColor）
}, 2000)
},
changeColor\u使用\u承诺（{commit}，newColor）使\u复杂化{
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
提交（'changeColor'，newColor）
解决（）；
}, 2000)
});
}
}
};
const store=新的Vuex.store({
模块：{
商店：myStore，
}
});
新Vue({
商店，
el:“#应用程序”，
方法：{
…Vuex.mapActions({
setColorSimple:“存储/更改颜色\u简单”，
SetColorComplexedNoPromise:“存储/更改颜色\u复杂\u不\u承诺”，
SetColorComplexedWithPromise:“存储/更改颜色\u ComplexedWithPromise”，
}),
myMethodCallByButton（）{
此.setColorSimple（“蓝色”）
。然后（response=>console.log（“简单完成”），err=>console.log（“简单错误”））；
此.setColordNoPromise（“蓝色”）
然后（response=>console.log（“没有承诺完成”），err=>console.log（“没有承诺错误”）；
此.setcolordWithPromise（“蓝色”）
.then（response=>console.log（“承诺完成”），err=>console.log（“承诺错误”）；
}
}
})

颜色：{{$store.state.store.color}

单击我并等待2秒

它适合我（控制台日志打印）：我写了一段短代码，因此执行速度非常快，但是如果为模拟大型操作添加setTimeout，则会出现问题。我认为问题可能是关于处理承诺，然后。。。看一看它是否使它变得清晰，这意味着即使mapAction/dispatch返回一个承诺，在我的情况下，我也必须添加一个承诺，等待“突变”的结束。从文档中，我认为它是通过mapAction进行精确管理的。准确吗？我试着在回答中解决这个问题。请检查一下。如果我打电话给“mapGetters”，返回数据需要时间，则会出现问题。假设我通过调用调用“mapGetters/getAll”的“getAll”方法来使用“v-for”循环。世界上绝对没有发生任何事情。在我的模板中：

在我的方法中，

M（）{return…mapGetters（“getAll（data）”）}

。在存储区中，getter:{getAll:state…}`没有映射getter是可以的（只是示例）。问题是：如果getter需要花费大量时间（正如我们在setTimeout中看到的），那么可以这样说，dom不使用dataset进行渲染。渲染之前需要花费很多时间（我的状态中有很多数据）。所以它是异步的，是的，我知道。所以我有义务调用一个mapAction，如果il需要很长时间，它会从state而不是mapGetter返回值给我？