Как получить состояния из магазина Vuex из списка Vuetify, VueJs

1

У меня есть файл 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
    }
 }

В моем коде я импортировал представление так, как если бы я должен был поставить:

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>

Либо я неправильно указал хранилище, либо шаблон неверен. Есть идеи?

  • 0
    магазин содержит модули, а модуль, от которого я хочу получить, называется myStore
  • 0
    Вы хотите, чтобы эти значения были реактивными?
Теги:
vue.js
vuex
vuetify.js

2 ответа

2
Лучший ответ

Почему вы хотите, чтобы 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
        }
      ]
    };
  }
};
Поделиться
  • 0
    я получаю "Не могу прочитать свойство" состояние "неопределенного"
  • 0
    @thatOneGuy это работает. Смотри эту скрипку . Вы зарегистрировали модули как массив или объект?
Показать ещё 8 комментариев
0

Может быть, это поможет. Длинный, но он работает.

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;
      }
    },
  }
});
Поделиться
  • 0
    Настройка наблюдателя избыточна
  • 0
    да, ваш ответ правильный. upvoted.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню