快速入门——状态管理VueX

Vuex介绍

状态管理

每一个Vuex应用的核心都是一个store,与普通的全局对象不同的是,基于Vue数据与视图绑定的特点,当store中的状态发生变化时,与之绑定的视图也会被重新渲染。

store中的状态不允许被直接修改,改变store中的状态的唯一途径就是显示地提交,这可以让我们方便地跟踪每一个状态的变化。

在大型复杂应用中,如果无法有效地跟踪到状态的变化,将会对理解和维护代码带来极大的困难。

Vuex中有5个重要的概念:State,Getter,Mutation,Action,Module

State用于维护所有应用层的状态,并确保应用只有唯一的数据源.Mutation提供修改State状态的方法

//创建一个新的store实例

const store = createStore({

state (){

return {

count: 0

}

},

mutations:{

increment(state){

state.count++

}

}

})

在组件中,可以直接使用this.$store.state.count访问数据,也可先用mapState辅助函数将其映射下来。

//单独构建的版本中辅助函数为Vuex.mapState

import { mapState } from 'vuex'

export default{

coputed: mapState({

count:state => state.count.

countAlias: 'count',

countPlusLocalState(state){

return state.count+this.localCount

}

})

}

Mutation同步操作

在组件中,可以直接使用store.commit来提交mutation

复制代码
method:{
    increment(){
        this.$store.commit('increment')
        console.log(this.$store.state.count)
    }
}

也可以先用mapMutation辅助函数将其映射下来

复制代码
methods: {
    ...mapMutations([
        'increment',
        'incrementBy'
        
    ])
},

Getter维护由State派生的一些状态,这些状态随着State状态的变化而变化

Action

类似于Mutation,适合做异步操作

Action不能直接修改状态,只能通过提交mutation来修改

复制代码
const store = createStore({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state++
        }
    },
    actions: {
        increment(context){
            context.commit('increment')
        }
    }


})
相关推荐
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
梁辰兴3 小时前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
程序猿追4 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio