Vuex全局状态管理1

组件之间共享数据的方式

方式 符号 说明
父向子传值 v-bind 属性绑定
子向父传值 v-on 事件绑定
兄弟组件之间 EventBus

$on 接收数据的那个组件

$emit 发送数据的那个组件

概念

Vuex 是实现组件全局状态(数据)管理的一种机制。

核心概念如下:

  • State 存放统一数据
  • Mutation 变更数据
  • Action
  • Getter

安装方法

  1. 安装vuex依赖包
shell 复制代码
npm install vuex --save
  1. 导入vuex包
js 复制代码
import Vuex from 'vuex'
  1. 创建store对象
js 复制代码
const store = new Vuex.store({
    // state中存放全局共享数据
    state: { count: 0 }
})
  1. 将store挂在到vue实例中
js 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'

const app = createApp(App)

//创建Vuex store 实例
const store = new Vuex.Store({
    //state 存放全局共享的数据
    state: { count: 0 }
})

app.use(router)
app.use(Vuex)
app.use(store)

//全局拦截异常信息
app.config.errorHandler = (err) => {
    console.log(err);
}

app.mount('#app')

State

提供唯一的公共数据源,所有共享的数据都要统一放入Store->State中

js 复制代码
//创建Vuex store 实例
const store = new Vuex.Store({
    //state 存放全局共享的数据
    state: { count: 0 }
})

访问数据

组件访问State中数据的方式:

js 复制代码
this.$store.state.全局变量名

组件中访问State中数据的第二种方式:

js 复制代码
// 1.从vuex中按需导入 mapState 函数
import {mapState} from 'vuex'

//通过刚才导入的mapState函数,将全局数据映射到当前组件的computed计算属性:

//2.将全局属性映射到当前组件的计算属性中
computed: {
	...mapState(['count'])
}

修改数据

第一种方式:直接修改,这种是错误的

js 复制代码
methods: {
    onbind(){
        this.$store.state.count++
    }
}

Mutation

用于变更Store中的数据

默认操作,第一种方式

只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据

通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

js 复制代码
//定义Mutation
const store = new Vuex.Store({
    state: { count: 0 },
    mutations: {
    	add(state) {
    		//变更状态
    		state.count++
    	}
    }
})

在子组件中操作

js 复制代码
methods: {
	onclick(){
		this.$store.commit('add')
	}
}

传递参数

js 复制代码
//定义Mutation
const store = new Vuex.Store({
    state: { count: 0 },
    mutations: {
    	addN(state, step) {
    		//变更状态
    		state.count += step
    	}
    }
})

在子组件中操作

js 复制代码
methods: {
	onclick(){
		this.$store.commit('add',3)
	}
}

第二种方式

js 复制代码
//1. 从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'

通过mapMutations将需要的mutations函数,映射为当前组件的methods方法

js 复制代码
//2.将指定的mutations函数,映射为当前组件的methods函数
methods :{
	...mapMutations(['add','addN'])
}

注意:不能再mutations函数中执行异步操作

若想要执行异步操作,需要到Action中完成

Action

相关推荐
weixin_443566987 小时前
天学网面试 —— 中级前端开发岗位
vue
YGY Webgis糕手之路15 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
aiguangyuan19 小时前
前端开发 Vue 组件优化
系统架构·vue·前端开发
YGY Webgis糕手之路20 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
pengzhuofan1 天前
Web开发系列-第13章 Vue3 + ElementPlus
前端·elementui·vue·web
伍哥的传说3 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan3 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘3 天前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
今天不要写bug5 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201305 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox