vue3环境下的vux使用
- 创建一个 store文件夹
- store文件夹里分别创建 index.js与modules文件夹
- 在 modules文件夹里创建想写的子模块文件,名称随意
index.js文件里的内容
js
import { createStore } from 'vuex'
import examine from './modules/examine.js'
export default createStore({
modules: {
examine
}
})
examine.js文件里的内容
js
// 用户信息模块(局部模块)
export default {
namespaced: true, // 开启命名空间
state() {
return {
// 用户信息对象
user: {},
// 侧边宽度
asideWidth: "250px",
menus: [],
ruleNames: [],
backgroundColor_header_Menu:'#000'
}
},
mutations: {
// 用户信息模块
SET_USERINFO(state, value) {
state.user = value
},
// 展开/缩起侧边
handleAsideWidth(state) {
state.asideWidth = state.asideWidth == "250px" ? "50px" : "250px"
},
// 左侧列表的数组
SET_MENUS(state, menus) {
state.menus = menus
},
//权限相关的数组
SET_RULENAMES(state, ruleNames) {
state.ruleNames = ruleNames
}
},
actions: {
GetMenuArray({commit},val){
commit("SET_MENUS", val)
commit("SET_USERINFO", {})
commit("SET_MENUS", [])
},
}
}
至此,我们已经创建了一个仓库了,接下来是在文件中使用仓库
js
<script setup>
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const route = useRoute()
const store = useStore()
console.log('可以看看打印',store)
// 这个是往仓库存数据
store.commit('examine/processData_VALUE', '我是存入的数据')
//这是读取仓库里的数据
const aa=store.state.examine.asideWidth
</script>