首页 文章

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

提问于
浏览 次
1

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

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

如何更改存储的状态 - 通过调用stores操作或调用模态组件方法（映射到存储） .

模态商店：

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(),
            }
        });

    };
}
vue.js vuejs2 vuex

2 回答

  • 1

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

    所以你可以做到

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

    EDIT: 只需导出普通对象

    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' 
])
    回复于
  • 2

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

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

相关问题