html5 - vuex storage problem in vue project

Question

Achievement effect: Click the button to switch the width of the left menu.

I have now used Vuex to store a field IsOpen, and then both the nav component and the menu component have obtained the initial value of the field, and they also switch when the nav component button is clicked. The value of IsOpen, but the class name that changes the width is not switched.

This is the code for nav formation:

This is the code of the menu component:

Answer 1

import { mapGetters } from 'vuex'

export {

computed: mapGetters['toggleClass']

}

Write the code to switch styles in the getters file of the warehouse

Answer 2

Please read the vuex documentation carefully

Vuex’s state storage is reactive. When the Vue component reads the state from the store, if the state in the store
changes, the corresponding component will be efficiently updated accordingly.

---

You can directly bind vuex data to your tags

<p v-bind:class="[this.$store.getters.isOpen ? 'openWidth', 'closeWidth']"></p>