обновить данные в моем отрендеренном шаблоне из моего магазина Vuex - PullRequest
Новая
       17

обновить данные в моем отрендеренном шаблоне из моего магазина Vuex

0 голосов
/ 26 апреля 2018

Я делаю простой пример, используя vue, vuetify и vuex. но у меня возникла проблема при обновлении данных, которые уже представлены в моем шаблоне, мутации в моем состоянии хранилища работают правильно, поэтому эти изменения должны быть обновлены в моем шаблоне, однако они сохраняют свое прежнее состояние, состояния в vuex не являются реактивная? Разве они не должны слушать, если есть какие-либо изменения и изменить его значение?

это мой шаблон, где я использую геттеры из своего магазина, чтобы иметь возможность перебирать в своей таблице: 

<v-data-table
 :headers="headers"
 :items="categories"
 :search="search"
>
 <template slot="items" slot-scope="props">
   <td>{{ props.item.name }}</td>
   <td>{{ props.item.description }}</td>
   <td>
     <v-btn icon class="mx-0" @click="editItem(props.item)">
       <v-icon color="teal">edit</v-icon>
     </v-btn>
     <v-btn icon class="mx-0" @click="deleteItem(props.item)">
       <v-icon color="pink">delete</v-icon>
     </v-btn>
   </td>
 </template>
 </v-data-table>

это скрипт моего компонента (резюме): 

import { mapGetters } from 'vuex'

  export default {
    name: 'category',
    data: () => ({
      dialog: false,
      search: '',
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Description', value: 'description' },
        { text: 'Actions', value: 'name', sortable: false }
      ]
    }),
    computed: {
      ...mapGetters([
        'categories'
      ])
    }
  }

и это краткое изложение моего магазина, как я упоминал ранее перед всеми мутациями, которые я выполняю, и состояние изменяется в соответствии с типом произведенной мутации, но это не отражено в моем шаблоне, есть кое-что, что Я неправильно обращаюсь с vuex? 

const state = {
  categories: []
}

const mutations = {
  GET_CATEGORIES(state, categories) {
    state.categories = categories.reverse()
  },

  ADD_CATEGORY(state, category) {
    state.categories.unshift(category)
  },

  UPDATE_CATEGORY(state, category) {
    const index = state.categories.findIndex(x => x.id == category.id)
    state.categories[index] = { ...state.categories[index], ...category }
  },

  DELETE_CATEGORY(state, category) {
    state.categories.splice(category, 1)
  }
}

1 Ответ

0 голосов
/ 26 апреля 2018

Вы используете mapGetters, но я не вижу получателей в вашем коде.

Читайте о геттерах здесь: https://vuex.vuejs.org/en/getters.html

Прочтите о том, как сопоставить состояние с реквизитом здесь: https://vuex.vuejs.org/en/state.html

И еще одно важное замечание об этой строке state.categories[index] = { ...state.categories[index], ...category }

Читайте о реактивности для массивов и объектов в Vue: https://vuejs.org/v2/guide/list.html#Caveats

Надеюсь, это поможет.

...