3-Vuex状态管理

本文详细介绍了Vuex在Vue.js中的作用,包括状态对象、getters、mutations、actions和模块化的概念,以及如何在项目中安装、配置和使用Vuex来管理全局数据和组件间通信。
摘要由CSDN通过智能技术生成

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它集中管理应用程序中的所有组件的状态,并提供了一种可预测的方式来修改和查询状态。
Vuex的核心概念包括:

  1. State(状态):应用程序的状态存储在一个单一的对象中,称为state。在Vue组件中,可以通过this.$store.state来访问状态。
  2. Getters(计算属性):用于从状态中派生出一些衍生数据,类似于Vue组件中的计算属性。可以通过this.$store.getters来访问计算属性。
  3. Mutations(变更):用于修改状态的唯一方式。Mutations是同步的操作,通过提交一个mutation来修改状态,并且每个mutation都有一个对应的字符串类型的事件名和一个处理函数。
  4. Actions(动作):用于处理异步的操作,例如从服务器获取数据。Action提交一个mutation来间接修改状态。Actions可以包含任何异步操作,并且可以通过this.$store.dispatch来触发。
  5. Modules(模块):当应用程序变得复杂时,可以将state、getters、mutations和actions分割成模块。每个模块拥有自己的state、getters、mutations和actions。
    通过使用Vuex,我们可以更好地组织和管理应用程序的状态,实现组件之间的数据共享和通信,并且使状态变更的过程更加可追踪和可维护。

Vuex一般用来存储全局可访问的数据

步骤:
1.安装

npm install vuex@版本号

2.在一个文件夹下创建两个.js文件如 tab.js和index.js

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'
Vue.use(Vuex)

//创建vuex的实例


export default new Vuex.Store({
    modules: {
        tab
    }
})


//tab.js
import Cookie from 'js-cookie'
export default {
    state: {
        isCollapse: false, //控制菜单展开或收起变量
        tabsList: [ //面包屑数据
            {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 's-home',
                url: 'Home/Home'
            },
        ],
        //侧边框菜单数据
        menu: [],
    },
    mutations: {
        collapseMenu(state) { //控制菜单展开或收起方法
            state.isCollapse = !state.isCollapse
        },
        //更新面包屑数据
        selectMenu(state, val) {
            // console.log(val)
            //判断添加数据是否为首页
            if (val.name !== 'home') {
                const index = state.tabsList.findIndex(item => item.name === val.name)
                    //不存在
                if (index == -1) {
                    state.tabsList.push(val)
                }
            }
        },
        //删除指定的tag数据
        closeTag(state, item) {
            // console.log(item)
            const index = state.tabsList.findIndex(val => val.name === item.name)
            state.tabsList.splice(index, 1)
        },
        setMenu(state, val) {
            state.menu = val
            Cookie.set("menu", JSON.stringify(val))
        },
        //动态注册路由
        registerouter(state, router) {
            // 没有数据
            if (!Cookie.get("menu")) return
                //有数据
        }
    }
}

3.在main.js(或相应的入口文件)中,需要引入刚刚创建的store,并在创建Vue实例时传入

4.访问数据或方法
在你的Vue组件中,可以通过this. s t o r e . s t a t e 访问状态,如 t h i s . store.state访问状态,如this. store.state访问状态,如this.store.state.tab.isCollapse
this.$store.commit(‘setMenu’,data.data.data)调用方法
但更推荐的做法是使用mapState、mapGetters、mapMutations和mapActions辅助函数来简化这些操作。

  • 45
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值