详解vue跨组件通信的几种方法(2)

<template> <section :class="{ 'hide': isHideDialog }"> <div @click="hideDialog()"></div> </section> </template> <script> import { hideDialog } from '../../vuex/actions' export default { vuex: { state: { isHideDialog: state => state.isHideDialog }, actions: { hideDialog } } } </script>

component/dialog-icon/index.vue 文件

<template> <section @click="hideDialog()">点击出现弹窗</section> </template> <script> import { hideDialog } from '../../vuex/actions' export default { vuex: { actions: { hideDialog } } } </script>

component/mask/index.vue 文件

<template> <div :class="{ 'hide': isHideMask }"></div> </template> <script> export default { vuex: { state: { isHideMask: state => state.isHideMask } } } </script>

vuex/store.js 文件

import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' Vue.use(Vuex) const state = { isHideMask: true, isHideDialog: true } const store = new Vuex.Store({ state, mutations }) if (module.hot) { module.hot.accept(['./mutations'], () => { const mutations = require('./mutations').default store.hotUpdate({ mutations }) }) } export default store

vuex/mutations.js 文件

import { HIDEDIALOG } from './mutation-types' export default { [HIDEDIALOG] (state) { state.isHideDialog = !state.isHideDialog state.isHideMask = !state.isHideMask } }

vuex/mutations-types.js 文件

export const HIDEDIALOG = 'HIDEDIALOG'

vuex/action.js 文件

import { HIDEDIALOG } from './mutation-types' export const hideDialog = ({ dispatch }) => dispatch(HIDEDIALOG)