Vuetify 목록 내 VueJs에서 Vuex 스토어에서 상태를 가져오는 방법

Vuetify 목록 내 VueJs에서 Vuex 스토어에서 상태를 가져오는 방법

다음과 같은 Vue 파일이 있습니다.

import store from '@/store'
export default{
    name: 'myList',
    data: () => ({
        show: true,
        listContent: [{
                name: '1',
                icon: 'person',
                value: function () {
                    return store.state.myStore.settings.one
                }
            }, {
                name: '2',
                icon: 'person',
                value: function () {
                    return store.state.myStore.settings.two
                }
            }, {
                name: '3',
                icon: 'person',
                value: function () {
                    return store.state.myStore.settings.three
                }
            }
        ]
    })
}

작동하지 않는 부분은 'listContent'에서 '값'을 얻는 것입니다.

 {
    name: '3',
    icon: 'person',
    value: function () {
        return store.state.myStore.settings.three
    }
 }

코드로 다음과 같이 뷰를 Import했습니다.

this.$store.state.myStore.settings.one

값 함수 내에서 'this'는 개체를 참조합니다.

{
    name: '3',
    icon: 'person',
    value: function () {
        return store.state.myStore.settings.three
    }
}

그리고 나는 가게를 얻을 수 없을 것이다.하지만 내 코드는 여전히 작동하지 않는다.listContent 내의 스토어에 액세스 할 필요가 있습니다.

리스트는 다음과 같이 렌더링됩니다.

<v-data-table :items="listContent" hide-actions hide-headers>
    <template slot="items" slot-scope="props">    
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right" v-text="props.item.value()">  </td>
    </template>
</v-data-table>

스토어를 잘못 참조했거나 템플릿이 잘못되어 있습니다.좋은 생각 있어요?

왜 당신이 원하는 것은value상태 값을 반환하는 함수입니다.할당하면 됩니다.state사용 가치this.$store.state.myStore.settings.one

이게 작동하려면data화살표 기능 대신 일반 기능을 선택하여this여전히 vue 인스턴스를 나타냅니다.

export default {
  name: "myList",
  data() {
    return {
      show: true,
      listContent: [
        {
          name: "1",
          icon: "person",
          value: this.$store.state.myStore.settings.one
        },
        {
          name: "2",
          icon: "person",
          value: this.$store.state.myStore.settings.two
        },
        {
          name: "3",
          icon: "person",
          value: this.$store.state.myStore.settings.three
        }
      ]
    };
  }
};

아마도 이것이 도움이 될거야.긴 거지만, 효과가 있어요.

const myModule = {
  state: {
    test: "modulle",
    settings: {
      one: "This is one",
      two: "This is two",
      three: "This is three"
    }
  }
};

const store = new Vuex.Store({
  modules: { myModule }
});

new Vue({
  el: "#app",
  store,
  data() {
    return {
      listContent: [
        {
          name: "1",
          icon: "person",
          value: null
        },
        {
          name: "2",
          icon: "person",
          value: null
        },
        {
          name: "3",
          icon: "person",
          value: null
        }
      ]
    };
  },
  watch:{
    '$store.state.myModule.settings.one':{
        immediate:true,
      handler:function(value){
            this.listContent[0].value = value;
      }
    },
    '$store.state.myModule.settings.two':{
        immediate:true,
      handler:function(value){
            this.listContent[1].value = value;
      }
    },
    '$store.state.myModule.settings.three':{
        immediate:true,
      handler:function(value){
            this.listContent[2].value = value;
      }
    },
  }
});

언급URL : https://stackoverflow.com/questions/51322760/how-to-get-states-from-a-vuex-store-from-within-a-vuetify-list-vuejs