从不同的组件更改 vuex 状态？

Question

我有一个依赖商店的组件（模态）。 store 具有模态组件的状态 - 无论它是否处于活动状态。

我需要能够调用此模式以从其他组件或什至仅在标准 link 上打开。它通过添加 .active class.

打开

如何更改商店的状态 - 通过调用商店操作或调用模态组件方法（映射到商店）。

模态商店：

class ModalModule {
    constructor() {
        return {
            namespaced: true,

            state: {
                active: false,
            },

            mutations: {
                toggleActive: (state) => {
                    return state.active = ! state.active;
                },
            },

            actions: {
                toggleActive({ commit }) {
                    commit('toggleActive');
                },
            },

            getters: {
                active: state => {
                    return state.active;
                }
            }
        };
    }
}

export default ModalModule;

Vue 组件：

<template>
    <div class="modal" v-bind:class="{ active: active }">
        <div class="modal-inner">
            <h1>modal content here</h1>
        </div>
        <div class="modal-close" v-on:click="this.toggleActive">
            X
        </div>
    </div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex';

export default {
    computed: {
        ...mapGetters('Modal', [
            'active',
        ])
    },
    methods: {
        ...mapActions('Modal', [
            'toggleActive',
        ]),
    }
}
</script>

在其他地方我希望能够拥有类似的东西：

<button v-on:click="how to change the state??">OPEN MODAL</button>

编辑：

这是商店：

import Vuex from 'vuex';
import ModalModule from './ModalModule'; 
class Store extends Vuex.Store {
    constructor() {

        Vue.use(Vuex);

        super({
            modules: {
                Modal: new ModalModule(),
            }
        });

    };
}

Answer 1

您可以通过 this.$store 从您的组件访问商店。在那里你可以调用你的动作和突变。所以

<button v-on:click="$store.commit('your mutation name', true)">OPEN MODAL</button>

Answer 2

您不需要针对您的特定用例执行操作。您只需定义一个突变，因为您只是更改状态中属性的布尔值。操作用于异步功能。你用例只是布尔值的同步变化

所以你可以做到

<button v-on:click="$store.commit('toggleActive')">OPEN MODAL</button>

编辑： 只需导出一个普通对象

const ModalModule = {
            namespaced: true,

            state: {
                active: false,
            },

            mutations: {
                toggleActive: (state) => {
                    return state.active = ! state.active;
                },
            },

            actions: {
                toggleActive({ commit }) {
                    commit('toggleActive');
                },
            },

            getters: {
                active: state => {
                    return state.active;
                }
            }
}

export default ModalModule;// export the module

甚至删除基于 class 的商店定义

import Vue from 'vue'
import Vuex from 'vuex';
import ModalModule from './ModalModule'; 

Vue.use(Vuex);

export const store = new Vuex.Store({
    modules: {
        ModalModule
    }
});

然后在您的组件中像这样更改它以映射突变 (<MODULE_NAME>/<MUTATION_NAME>)

...mapMutations([
    'ModalModule/toggleActive' 
])

从不同的组件更改 vuex 状态？

Changing a vuex state from a different component?

vue.js

vuejs2

vuex