インスタンスに注入しているVuexストアがあります。
import store from '../store';
const mainNav = new Vue({
el: '#main-nav',
store,
components: { NavComponent }
});
そして、コンポーネント内のそのストアから計算されたプロパティを作成しています。
computed: {
isWide() {
return this.$store.state.nav.type === 'wide';
}
}
これにより、this.isWideコンポーネントの初期化時にテンプレートのプロパティが作成されますが、ストア値が更新された場合、コンポーネントはこれを登録しません。古い値はテンプレートに残ります。
私はここで何が間違っているのですか？
すべてを正しく設定すれば、コードは機能するはずです：http：//codepen.io/CodinCat/pen/RKZeZe？editors = 1010
よくある間違いは、州の初期データを提供しなかったことです。
状態の形状を明示的に宣言する必要があるので、代わりに
state: {}
// or
state: {
nav: {}
}
これを行う：
state: {
nav: {
type: '...'
},
...
}
または、次の例のように、プロパティは反応しません：http：//codepen.io/CodinCat/pen/ggxBEV？editors = 1010
また、状態を更新したことを確認してください。おそらく問題は、期待どおりに状態を正しく更新しなかったことです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加