组件之间共享数据的方式
方式 | 符号 | 说明 |
---|---|---|
父向子传值 | 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中完成