2

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

1 回答 1

2

您不依赖data. 因此，当更改时，您的计算属性不会被触发。propscomputedbookmarksStore

我建议在您的情况下使用 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属性都会被触发。

于 2019-01-02T14:40:27.307 回答