vue3中采用store存储infoVisible的状态实现非父子组件通信

目录

1.在路径store/index.js文件下操作vuex分模块管理导入

2.store/modules/InfoModal.js文件创建存取修改的操作方法

3.vue3 文件下渲染、存取操作

1.在路径store/index.js文件下操作vuex分模块管理导入

import {
  createStore
} from 'vuex'
import InfoModal from './modules/InfoModal'
export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    InfoModal
  }
})

2.store/modules/InfoModal.js文件创建存取修改的操作方法

export default {
  state: {
    infoVisible: false
  },
  mutations: {
    setInfoVisible (state, infoVisible) {
      state.infoVisible = infoVisible
    }
  },
  actions: {}
}

3.vue3 文件下渲染、存取操作

<template>
   <a-button @click="showModal">changed</a-button>
   <div >{{store.state.InfoModal.infoVisible}}</div>
</template>

<script>

import { useStore } from 'vuex'

export default defineComponent({
  components: { },
  setup () {
    const showModal = ( ) => {
      store.commit('setInfoVisible', true)
    }

    return {
      showModal,
      store
    }
  }
})

</script>