Question

我正在使用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
  }
}
})

Answer 1

您不依赖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，请在您的Vue根实例数据中传递bookmarksStore。

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

您现在可以使用bookmarksStore将props传递给子组件，并使用传递给Vue根实例的事件对其进行更新。这样，bookmarksStore是每个子组件中的props，将触发computed属性。

存储值更改，但不影响组件中的计算属性

1 个答案:

使用Vuex

没有Vuex