时间戳

首页 > 解决方案 > 如何从商店（vuex）vuejs返回一个值

vue.js - 如何从商店（vuex）vuejs返回一个值

问题描述

我正在做一个项目（只是个人）并试图熟悉 vuex。我设法做了很多（到目前为止），但有一个坚果我无法破解。

我正在尝试访问一个字段-> 特定员工的薪水

这是我的 store.js (vuex)

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

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
      emps: [
              {name: 'John', salary: 110},
              {name: 'Jimmy', salary: 80}
      ],
  },
  getters: {
  },
  mutations: {
    getCurrentSalary: (state, data) => {
      var empIndex = findEmpIndex(data);
      console.log(state.emps[empIndex].salary); // this is ok!!
      return state.emps[empIndex].salary;
    }
  },
  actions: {
    getCurrentSalary: ({commit}, payload) => {
      commit('getCurrentSalary', payload);
    }
  }
});


// helpers
function findEmpIndex (stockName) {
   return store.state.markets.findIndex(item => item.name === stockName);
}

在特定员工的一个组件中，我将其称为如下：

<template lang="html">
  <div class="container">
     Current Salary: {{ getCurrentSalary("John") }}
  </div>
</template>

<script>
  import {mapActions} from 'vuex'

  export default {
      methods: {
        ...mapActions([
          'getCurrentSalary'
        ])
      }
  }
</script>

<style lang="css" scoped>
</style>

但是有一个问题是薪水可以改变，所以我想立即得到改变（无论何时发生）

我可以正确看到控制台日志（这至少意味着正在调用该函数..但是在打印时它说：

Current Salary: [object Promise]

它不想打印值，而是打印一个承诺..我做了很多搜索，但没有找到（或可能理解）如何解决这个问题......如果有任何类似于这个的论坛或问题有解决方案请发送链接（抱歉）

标签： vue.jsvuex

解决方案

您似乎想要获取getCurrentSalary mutation的返回值，但您正在调用组件中的getCurrentSalary 操作。

由于您尝试获取数据而不是更改数据，因此我建议您删除突变并创建一个吸气剂。

就像是：

  getters: {
    getCurrentSalary: (state) => (data) => {
      var empIndex = findEmpIndex(data);
      console.log(state.emps[empIndex].salary); // this is ok!!
      return state.emps[empIndex].salary;
    }
  },

然后在你的组件中使用mapGetters而不是。mapActions

推荐阅读