父 向 子 传值:v-bind属性绑值
子 向 父 传值:v-on事件绑定
兄弟组件之间共享数据:EventBus
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
能够在vuex中集中管理共享的数据,易于开发和后期维护
能够高效地实现组件之间的数据共享,提高开发效率
存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步。
1.4、什么样的数据适合存储到Vuex中
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依然存储在组件自身的data中即可。
1、安装vuex依赖包
npm i vuex --save
2、导入vuex包
import Vuex from 'vuex' Vue.use(Vuex)
3、创建stroe对象
const store = new Vuex.Store({ //state中存放的就是全局共享的数据 state:{count:0} })
4、将store对象挂载到vue实例中
new Vue({ el:'#app', render:h => h(app), router, //将创建的共享数据对象,挂载到vue实例中 //所有的组件,就可以直接从stroe中获取全局的数据了 store })
1、vuex中的主要核心概念如下
State提供唯一的公共数据源, 所有共享的数据都要统放到Store的State中进行存储。
export default new Vuex.Store({ state: { count: 0 }, })
组件访问State中数据的**第一种方式:**Addition.vue
this.$store.state.全局数据名称 <h3>当前最新的count值为:{{$store.state.count}}</h3>
组件访问State中数据的第二种方式: Subtraction.vue
// 1. 从 vuex 中按需导入 mapState 函数 import { mapState } from 'vuex'
通过刚才导入的 mapState 函数,将当前组件需要的全局数据,映射为当前组件的 computed 计算属性:
<h3>当前最新的count值为:{{count}}</h3> // 2. 将全局数据,映射为当前组件的计算属性 computed: { ...mapState(['count']) }
Mutation 用于变更 Store中 的数据。
① 只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。
② 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
(1)
// 定义 Mutation store.js const store = new Vuex.Store({ state: { count: 0 }, mutations: { add(state) { // 不要在 mutations 函数中,执行异步操作 // setTimeout(() => { // state.count++ // }, 1000) // 变更状态 state.count++ } } })
在组件中访问Mutation Addition.vue
<button @click="btnHandler1">+1</button> methods:{ //触发mutation btnHandler1() { //触发 mutations 的第一种方式 this.$store.commit('add') }, }
(2)可以在触发 mutations 时传递参数:
// 定义Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { addN(state, step) { // 变更状态 state.count += step } } })
在组件中访问Mutation Addition.vue
<button @click="btnHandler2">+N</button> methods: { btnHandler2() { // commit 的作用,就是调用 某个 mutation 函数 携带参数 this.$store.commit('addN', 3) }, }
this.$store.commit() 是触发 mutations 的第一种方式,触发 mutations 的第二种方式:
// 1. 从 vuex 中按需导入 mapMutations 函数 import { mapMutations } from 'vuex'
通过刚才导入的 mapMutations 函数,将需要的 mutations 函数,映射为当前组件的 methods 方法:
// 2. 将指定的 mutations 函数,映射为当前组件的 methods 函数 methods: { ...mapMutations(['add', 'addN']) }
完整代码:
//store.js export default new Vuex.Store({ state: { count: 0 }, // 只有 mutations 中定义的函数,才有权利修改 state 中的数据 mutations: { //减减 sub(state) { state.count-- }, //携带参数 subN(state, step) { state.count -= step } }, })
在组件中Subtraction.vue
<h3>当前最新的count值为:{{count}}</h3> <button @click="btnHandler1">-1</button> //<button @click="btnHandler2">-1</button> <button @click="subN(3)">-N</button> -----携带参数 import { mapState, mapMutations} from 'vuex' computed: { ...mapState(['count']), }, methods: { ...mapMutations(['sub', 'subN']), btnHandler1() { this.sub() }, //btnHandler2() { //this.subN(3) //}, }
(1)Action 用于处理异步任务。
如果通过异步操作变更数据,**必须通过 Action,而不能使用 Mutation,**但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。
(1)处理异步任务
// 定义 Action const store = new Vuex.Store({ // ...省略其他代码 mutations: { add(state) { state.count++ } }, actions: { addAsync(context) { setTimeout(() => { context.commit('add') }, 1000) } } })
在组件中Addition.vue
<button @click="btnHandler3">+1 Async</button> // 异步地让 count 自增 +1 btnHandler3() { // 这里的 dispatch 函数,专门用来触发 action this.$store.dispatch('addAsync') },
(2)携带参数
触发 actions 异步任务时携带参数:
// 定义 Action const store = new Vuex.Store({ // ...省略其他代码 mutations: { addN(state, step) { -------------携带参数 state.count += step } }, actions: { addNAsync(context, step) { -------------携带参数 setTimeout(() => { context.commit('addN', step) }, 1000) } } })
在组件中
<button @click="btnHandler4">+N Async</button> btnHandler4() { this.$store.dispatch('addNAsync', 5) }
this.$store.dispatch() 是触发 actions 的第一种方式,触发 actions 的第二种方式:
// 1. 从 vuex 中按需导入 mapActions 函数 import { mapActions } from 'vuex'
通过刚才导入的 mapActions 函数,将需要的 actions 函数,映射为当前组件的 methods 方法:
// 2. 将指定的 actions 函数,映射为当前组件的 methods 函数 methods: { ...mapActions(['addASync', 'addNASync']) }
完整代码
export default new Vuex.Store({ state: { count: 0 }, // 只有 mutations 中定义的函数,才有权利修改 state 中的数据 mutations: { //减减 sub(state) { state.count-- }, subN(state, step) { state.count -= step } }, //actions可以处理异步任务 actions: { subAsync(context) { setTimeout(() => { // 在 actions 中,不能直接修改 state 中的数据; // 必须通过 context.commit() 触发某个 mutation 才行 context.commit('sub') }, 1000) }, subNAsync(context, step) { setTimeout(() => { context.commit('subN', step) }, 1000) } }, })
组件Subtraction.vue
<h3>当前最新的count值为:{{count}} <button @click="subAsync">-1 Async</button> <button @click="subNAsync(5)">-N Async</button> import { mapState, mapMutations, mapActions } from 'vuex' methods: { ...mapActions(['subAsync', 'subNAsync']), }
不会修改state里面的数据
Getter 用于对 Store 中的数据进行加工处理形成新的数据。
① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性。
② Store 中数据发生变化,Getter 的数据也会跟着变化。
// 定义 Getter const store = new Vuex.Store({ state: { count: 0 }, getters: { showNum: state => { return '当前最新的数量是【'+ state.count +'】' } } })
使用getters的第一种方式
this.$store.getters.名称
使用getters的第一种方式
{{showNum}} import { mapGetters } from 'vuex' computed: { ...mapGetters(['showNum']) }