vuex с 2 компонентами не обновляется

Question

Может ли кто-нибудь помочь мне с жизненным циклом этого?

У меня 2 компонента vue 1. есть кнопка (Header.vue)

и 2. это боковая панель, которую я хочу скрыть / показать, зависит от значения

заголовок выглядит так

<template>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a role="button" class="navbar-burger is-pulled-left" aria-label="menu" aria-expanded="false"
               @click='getToggleSidebarMobile'>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
            <a class="navbar-item " href="/">
                <img :src="'/../images/logo.png'">
            </a>


        </div>

        <div class="navbar-end is-pulled-right">
            <div class="navbar-item">

            </div>
        </div>
    </nav>
</template>

<script>
    import {store} from '../store';

    export default {
        data() {
            return {
                    hideSidebarMobile: store.state.hideSidebarMobile
            }
        },
        methods: {
            getToggleSidebarMobile(){
                this.hideSidebarMobile = !this.hideSidebarMobile;
                store.dispatch('getToggleSidebarMobile', this.hideSidebarMobile);
            }
        }


    }
</script>

боковая панель больше, но урезанная версия такова:

<template>
    <aside class="menu " v-bind:class="{'is-hidden-touch' : store.state.hideSidebarMobile}" >
....
</aside>
</tamplate>
....
        data() {
            return {
                sidebar: {
                    hideSidebarMobile: store.state.hideSidebarMobile
                },
            }
        },
        methods: {
            getToggleSidebarMobile(){
                store.dispatch('getToggleSidebarMobile');
            }
...

обновление: добавлен store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
state: {
    hideSidebarMobile: true
},
actions: {
    getToggleSidebarMobile(context, payload){
        console.log("action "+payload)
        context.commit('getToggleSidebarMobile', payload)
    }
},
mutations: {
    getToggleSidebarMobile(state, data){
        state.hideSidebarMobile = data;
        console.log("Mutation "+data);
    }
},
getters: {
    getToggleSidebarMobile(state){
        return state.hideSidebarMobile;
    }
},

Я также пытался использовать в шаблоне v-bind: class = "{'is-hidden-touch': sidebar.hideSidebarMobile}", но мне тоже не повезло, так как я вижу, что значения обновляются, но я ' я не могу добавить / удалить этот класс, где я ошибся?

обновлено ... забыли загрузить магазин

Answer 1

Ссылка store.state.hideSidebarMobile в шаблоне боковой панели не будет работать. (Если вы не установили свойство store в экземпляре Vue на боковой панели, равное хранилищу Vuex, которое, как я полагаю, у вас нет.)

Если вы правильно зарегистрировали модуль Vuex:

const store = new Vuex.Store({ ... }); // your store config
Vue.use(Vuex); // registering the plugin
new Vue({ // your root Vue instance
  el: '#app',
  store: store, // passing the `store` so components can reference this.$store
  ...
});

тогда вы сможете ссылаться на магазин в компоненте боковой панели через this.$store. Это также означает, что нет необходимости импортировать store в каждый файл, который должен ссылаться на него.

Так в вашем шаблоне:

v-bind:class="{'is-hidden-touch' : $store.state.hideSidebarMobile}"