>

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

  • 답변 # 1

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

    당신은 () 를 잊어

관련 자료

  • 이전 reactjs - thissetState 또는 thisstate를 허용하지 않는 외부 함수
  • 다음 최신 버전의 반응 네이티브의 앱이 iOS에서 실행되고 있지 않습니다