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

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

所以你可以做到

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

Answer 2

您可以通过this.$store从您的组件访问商店。在那里你可以称呼你的行为和突变。所以

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

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

2 个答案: