Vuex全局状态管理1

组件之间共享数据的方式

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

$on 接收数据的那个组件

$emit 发送数据的那个组件

概念

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

核心概念如下：

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

安装方法

安装vuex依赖包

shell 复制代码

npm install vuex --save

导入vuex包

js 复制代码

import Vuex from 'vuex'

创建store对象

js 复制代码

const store = new Vuex.store({
    // state中存放全局共享数据
    state: { count: 0 }
})

将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中完成