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

相关推荐
幸运小圣2 小时前
Vue3 -- 项目配置之prettier【企业级项目配置保姆级教程2】
前端·vue.js·vue
计算机-秋大田2 小时前
基于微信小程序的农场管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
fukaiit3 小时前
vue项目npm run serve出现【- Network: unavailable】(从排查到放弃)
npm·vue·node·win11
_处女座程序员的日常8 小时前
Rollup failed to resolve import “destr“ from ***/node_modules/pinia-plugin-pers
javascript·uni-app·vue
Little_Code17 小时前
uniapp 如何使用vuex store (亲测)
uni-app·vuex·store
四喜花露水18 小时前
vue2.x elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局
前端·elementui·vue
松果猿19 小时前
Vite初始化Vue3+Typescrpt项目
vue
龙哥·三年风水1 天前
群控系统服务端开发模式-应用开发-前端个人资料开发
分布式·vue·群控系统
阿征学IT2 天前
vue 基础 组件通信1
vue
Crazy Struggle2 天前
.NET 8.0 通用管理平台,支持模块化、WinForms 和 WPF
vue·wpf·winform·.net 8.0·通用权限管理