Получение неопределенной ошибки, несмотря на то, что Vuex mapstate определено в компонентах

Question

У меня проблемы с получением функций vuex mapState.В моем файле TheHeaderComponent.vue я пытаюсь напечатать оба значения {{ $store.state.coins }} и {{ coins }}, но печатается только первое, несмотря на то, что я ввел ...mapState['coins'] в компонент.

Показана соответствующая ошибка: vue.esm.js?a026:628 [Vue warn]: Property or method "coins" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Хотите знать, может ли кто-нибудь пролить свет на то, что я должен делать?

# TheHeaderComponent.vue
<template>
  <div>
    <p>{{ $store.state.coins }}</p>
    <p>{{ coins }}</p>
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: 'TheHeader',
  computed: {
    ...mapState['coins'],
  },
  methods: {
  },
};
</script>

Интересно, если я заменю ...mapState['coins'] с фактической вычисляемой функцией (см. следующий код), * ​​1013 * работает.

coins() {
  return this.$store.state.coins;
},

Я также включил другие файлы для справки (только соответствующий код).

# mutations.js
export const setStudentId = (state, value) => {
  state.studentId = value;
};


export const setCoins = (state, value) => {
  state.coins = value;
};


# store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    coins: -1,
  },
  mutations,
});

# main.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

import App from './App.vue';

import {store} from './store/store';

// allows us to use the vue debugger
Vue.config.devtools = true;

new Vue({
  el: '#app',
  store,
  // we pull information about user
  mounted: function() {
    axios
        .get('/api/v1/core/token/')
        .then((response) => {
          axios.defaults.headers.common['Authorization'] = 'Token '
            + response.data.token;
          this.$store.commit('setStudentId', response.data['student_id']);
        })
        // pulls basic information on student
        .then((response) => {
          return axios
              .get('/api/v1/core/student/' + this.$store.state.studentId);
        })
        .then((response) => {
          this.$store.commit('setCoins', response.data['coins']);
        });
  },
  render: (h) => h(App),
});

Answer 1

...mapState(['coins']),

Вы забыли о ()