구성 요소에 Vuex 맵 상태가 정의되어 있음에도 정의되지 않은 오류가 발생함

구성 요소에 Vuex 맵 상태가 정의되어 있음에도 정의되지 않은 오류가 발생함

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']실제 계산 함수 포함(다음 코드 참조),{{ coins }}작동하다.

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),
});

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

잊어버리세요()

언급URL : https://stackoverflow.com/questions/54982828/getting-a-not-defined-error-despite-vuex-mapstate-being-defined-in-components