Сохраняет значение, но оно не влияет на вычисляемое свойство в компоненте - PullRequest
Новая
       24

Сохраняет значение, но оно не влияет на вычисляемое свойство в компоненте

0 голосов
/ 02 января 2019

Я строю древовидное представление с помощью VueJS и хочу сохранить последний нажатый элемент в магазине, а затем использовать этот магазин для отображения последнего нажатого элемента в компоненте.

Я использую вычисляемое свойство в компоненте, где я хочу показать элемент. Проблема в том, что при изменении хранилища оно не влияет на вычисляемое свойство в компоненте.

Относительный код показан по этой ссылке: https://jsfiddle.net/eywraw8t/527884/

Vue.component('category-list', {
    template: `
    <div>
  <b>{{selectedCat}}</b>
  <ul>
        <category v-for='(catg, catgIdx) in categories' :category='catg' :key='catgIdx'
                            v-on:category-selected='categorySelected'/>
    </ul>
  </div>
  `,
    props: {
        categories: { type: Array, default: () => [] }
    },
  computed:{
  selectedCat(){
    return bookmarksStore.state.selectedCategory
  }
}
})

1 Ответ

0 голосов
/ 02 января 2019

Вы не зависите от реактивных данных (data, props) на вашем computed.Таким образом, при изменении bookmarksStore ваше вычисленное свойство не срабатывает.

Я бы предложил использовать Vuex в вашем случае для создания вашего магазина.

Использование Vuex 

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
      selectedCategory: {name: ""}
  },
  getters: {
    getselectedCategory: state => {
        return state.selectedCategory;
    }
  },
  mutations:{
    selectCategory(state, payload) {
        state.selectedCategory.name = payload
    }
  }
})

new Vue({
  el: "#app",
  store,
  data: {
...

Затем вы можете использовать this.$store.commit('selectCategory', category) для обновления selectedCategory вашего магазина и вашего вычисленного свойства будет выглядеть так: 

computed:{
  selectedCat(){
    return this.$store.getters.getselectedCategory
  }
}

Без Vuex

Если вы не хотите использовать Vuex, передайте свой bookmarksStore в ваших данных корневого экземпляра Vue.

new Vue({
  el: "#app",
  data: {
    bookmarksStore: new BookmarksStore(),
    ...

Теперь вы можете передать bookmarksStore дочерним компонентам, используя props, и обновить его, используя события, переданные корневому экземпляру Vue.Таким образом, bookmarksStore, являющееся props в каждом дочернем компоненте, будет запускаться свойство computed.

...