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

Question

我正在使用 VueJS 构建一个树形视图，我想将最后点击的项目保存在商店中，然后使用此商店显示组件中最后点击的项目。

我在要显示项目的组件中使用计算属性。问题是，当 store 发生变化时，它不会影响组件中的计算属性。

相关代码见此链接： 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

您不依赖 computed 上的响应式数据 (data,props)。因此，当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(),
    ...

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