目录
1.在路径store/index.js文件下操作vuex分模块管理导入
2.store/modules/InfoModal.js文件创建存取修改的操作方法
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>