vuex的使用

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>
相关推荐
天天向上102414 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y30 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁37 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry37 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录38 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟39 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan43 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
vvilkim1 小时前
Nuxt.js 全面测试指南:从单元测试到E2E测试
开发语言·javascript·ecmascript
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui