vue.js - 从不同的组件更改 vuex 状态？

Question

我有一个依赖商店的组件(模态)。商店具有模态组件的状态 - 无论它是否处于事件状态。

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

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

模态商店:

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

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

所以你可以这样做

<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' 
])