Vuex、計算されたプロパティは反応しません

debugcn 投稿 Dev

Hesiod

各サブコンポーネント（および親コンポーネント）が共有プロパティを更新できる（vueX状態で保存する）状態をいくつかのコンポーネント（サブコンポーネント）間で共有しようとしています。

ここに小さな「再現方法」を作成しました。

Vue.component('urlQueryComponent', {
  template: '<div>object: {{pathQuery}}</div>',
  computed: {
    pathQuery () {
      return this.$store.state.urlQuery;
    }
  }
})

https://codepen.io/anon/pen/rvmLrZ?editors=1010

サブコンポーネントの状態を更新すると、変更が処理されないという問題があります。

VueXインスタンス：

const store = new Vuex.Store({
  state: {
    urlQuery:  {
      path: '',
      query: {}
    }
  },
  mutations: {
    pushQuery: (state, type) => {
      state.urlQuery.query[type.key] = type.value;
      console.log('urlQuery: ', state.urlQuery);
    },
    pushPath: (state, path) => {
      state.urlQuery.path = path;
    }
  },
  getters: {
    getUrlQuery: state => state.urlQuery
  }
})

そして親コンポーネント：

new Vue({
  el: '#app',
  store,
  methods: {
    changeType (type) {
      this.$store.commit('changeType', type);
    }
  }
})

編集：

振り返った後、前のコードは実際には私の問題を対象としていません。このフィドルは私の問題をより対象としています。

ソヴァリーナ

pushQueryミューテーションを次のように変更します。

pushQuery: ({ urlQuery }, type) => {
  const key = type.key
  Vue.set(urlQuery.query, key, type.value)
  console.log('urlQuery: ', urlQuery);
}

動作するはずです（ここでフィドル）

ソース（Vuex変異）：

変更はVueのリアクティブルールに従いますVuexストアの状態はVueによってリアクティブになるため、状態を変更すると、状態を監視しているVueコンポーネントが自動的に更新されます。これは、プレーンなVueを使用する場合、Vuexの変異が同じ反応性の警告を受けることも意味します。

必要なすべてのフィールドを事前に使用して、ストアの初期状態を初期化することをお勧めします。

オブジェクトに新しいプロパティを追加するときは、次のいずれかを使用する必要があります。 Vue.set(obj, 'newProp', 123)

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]