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

相关推荐
ZwaterZ2 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
ZwaterZ4 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
木子七7 小时前
vue2-vuex
前端·vue
小小黑0078 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler11 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
逆旅行天涯16 小时前
【功能实现】bilibili顶部鼠标跟随效果怎么实现?
前端·javascript·vue
DDDHL_1 天前
vitepress博客模板搭建
前端·vue
说书客啊1 天前
计算机毕业设计 | SpringBoot+vue汽车资讯网站 汽车购买咨询管理系统(附源码+论文)
java·spring boot·node.js·vue·汽车·毕业设计·课程设计
刚刚好ā1 天前
uni-app跳转外部链接方式汇总--超全
前端·vue.js·uni-app·vue·webview
木子七1 天前
vue2-脚手架
前端·vue