html5 – Vuex-Speicherproblem im Vue-Projekt
迷茫
迷茫 2017-06-27 09:19:31
0
2
865

Um den Effekt zu erzielen: Klicken Sie auf die Schaltfläche, um die Breite des Menüs auf der linken Seite zu ändern.

Ich habe jetzt Vuex verwendet, um ein Feld IsOpen zu speichern, und dann haben sowohl die Navigationskomponente als auch die Menükomponente den Anfangswert des Feldes erhalten, wenn auf die Navigationskomponentenschaltfläche geklickt wird, der Wert von IsOpen wird ebenfalls umgeschaltet, aber der Wert ändert sich. Die Breite des Klassennamens wird nicht umgeschaltet.

Dies ist der Code für die Navigationsformation:

Dies ist der Code für die Menükomponente:

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

Antworte allen(2)
迷茫

import { mapGetters } from 'vuex'

export {

computed: mapGetters['toggleClass']

}

在仓库的 getters 文件里面写切换样式的代码

Peter_Zhu

请仔细阅读vuex文档

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store
中的状态发生变化,那么相应的组件也会相应地得到高效更新。


你可以直接将vuex的数据绑定到你的标签上

<p v-bind:class="[this.$store.getters.isOpen ? 'openWidth', 'closeWidth']"></p>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!