Vuex 调度不返回视图中的数据 [英] Vuex dispatch doesn't return data in view

问题描述

我无法从 vuex 获取数据并在所有视图中使用它们，但我确实在网络选项卡中看到了它们的成功结果.

截图

网络标签

控制台

代码

store.js

状态:{货币: {}},突变:{货币(国家，货币){state.currency = 货币}},动作:{货币({提交}){返回新的承诺((解决，拒绝)=> {提交('货币')axios({url: '/api/currencyDefault', 方法: 'GET' }).then(resp => {const 货币 = resp.data.data提交('货币'，货币)解决(响应)}).catch(错误 => {提交('货币')拒绝(错误)})})},},吸气剂:{货币:状态 =>国家货币，}

App.vue(路由器将加载的主要组件)

然后在我的其他组件中，我调用货币，例如:

{{currency.name}}

想法?

解决方案

Method Currency 已经定义为 props.在您的代码中删除它.

道具:['货币']

十个像这样在你的组件中调用这个货币

{{this.$store.getters.currency.name}}

为了确定显示货币，我所做的是首先放置一个条件来检查它是否已经加载.像这样

{{this.$store.getters.currency.name}}

或在您的数据中声明一个新变量，例如

data() {返回 {货币:this.$store.getters.currency.name}}

现在你可以这样称呼它

{{货币名称}}

I cannot get my data from vuex and use them in all views, but i do see their success results in network tab.

screenshots

network tab

console

Code

store.js

state: {
    currency: {}
},
mutations: {
    currency(state, currency){
      state.currency = currency
    }
},
actions: {
    currency({commit}){
      return new Promise((resolve, reject) => {
        commit('currency')
        axios({url: '/api/currencyDefault', method: 'GET' })
        .then(resp => {
          const currency = resp.data.data
          commit('currency', currency)
          resolve(resp)
        })
        .catch(err => {
          commit('currency')
          reject(err)
        })
      })
    },
},
getters: {
    currency: state => state.currency,
}

App.vue (main component where routers will load)

<script>
export default {
  props:['currency'],
  data() {
    return {
      isCollapse: true,
    }
  },
  created () {
    this.currency()
  },
  methods: {
    currency() {
      this.$store.dispatch('currency')
   }
  },
}
</script>

An then in my other component i call for currency like:

{{currency.name}}

ideas?

解决方案

Method Currency is already defined as props. remove this in your code.

props:['currency']

Ten call this currency in your component like this

<div>
   {{this.$store.getters.currency.name}}
</div>

to surely display the currency, what I did is to put first a condition to check if it is was already loaded. like this

<div v-if="$store.getters.currency">
      {{this.$store.getters.currency.name}}
  </div>

or declare a new variable in your data like

data() {
   return {
       currency: this.$store.getters.currency.name
   }
}

now you could call it this way

<div v-if="$store.getters.currency">
     {{currency.name}}
</div>

这篇关于Vuex 调度不返回视图中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！