简单认识Vuex
（Why）为什么使用Vuex？
组件间通信
- 父子通信
- 父→子：props
- 子→父：events($emit)
- 兄弟通信：eventBus
- 跨级通信：eventBus
不同组件间通信常用的方式如上所示，详细总结请看：https://blog.csdn.net/xicc1112/article/details/106211934
以上方式只适合在小范围内来进行数据的共享，如果需要频繁的、大范围的实现数据的共享会显得力不从心。使用Vuex操作可以方便的实现组件之间数据的共享。
Vuex
图源自网络
如上图所示，若想实现标号1组件与标号2组件之间的通信，按照往常的做法需要通过父组件，兄弟组件等来进行。而Vuex就相当于在组件旁边定义一个共享的状态对象STORE，标号1组件将需要共享的数据存储在STORE中，标号2组件则可以直接从STORE中获取数据，不再需要进行复杂的传递。
（What）什么是Vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单的说，Vuex是实现组件数据管理的一种机制，这种机制要求将想要共享的数据放到STORE中的State中存储，通过Mutation进行数据变更，通过在Action中触发Mutation处理异步操作。
（How）如何使用Vuex？
开始
- 安装vuex依赖包
npm install vuex --save
- 导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
- 创建store对象
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {},
})
- store对象挂载到vue实例中
new Vue({
el: '#app',
store
})
核心概念
State
所有共享的数据统一放到Store的State中进行存储
定义共享数据：
export default new Vuex.Store({
state: {
count: 0
}
})
组件访问共享数据的两种方式：
- store.state.count
<template>
<div>
<h3>当前的count值为：{{ $store.state.count }}</h3>
</div>
</template>
- mapState
vuex中按需导入mapState函数，通过导入的函数，将需要的数据映射为当前组件的计算属性
import { mapState } from 'vuex'
export default {
data() {
return {}
},
computed: {
...mapState(['count'])
}
}
Getter
Getter用于对Store中的数据进行加工处理形成新的数据。Getter不会修改Store中的原数据，它只是起到“包装器”的作用，将Store中的数据变一种形式然后返回。
定义Getter
export default new Vuex.Store({
state: {
count: 0
},
getters: {
showNum(state) {
return '当前最新的数量是' + state.count
}
}
})
使用Getter的两种方式：
- store.getters.showNum
<template>
<div>
<h3>{{ $store.getters.showNum }}</h3>
</div>
</template>
- mapGetters
import { mapGetters } from 'vuex'
export default {
data() {
return {}
},
computed: {
...mapGetters(['showNum'])
}
}
Mutation
Mutation用于变更Store中的数据。
【！！注意：在Vuex中只能通过Mutation变更store数据，不可以直接操作Store中的数据。】
定义Mutation
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
state.count++
}
}
})
触发Mutation的两种方式
- store.commit
<template>
<div>
<h3>当前的count值为：{{ $store.state.count }}</h3>
<button @click="btnHandler1">+1</button>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
btnHandler1() {
this.$store.commit('add')
}
}
}
</script>
store.commit触发mutations时可以携带参数
this.$store.commit('addN', 3)
此时在定义mutations函数期间对应要添加两个参数，第二个参数即传进来的参数
mutations: {
addN(state, step) {
state.count += step
},
- mapMutations
vuex中按需导入mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法
import { mapState, mapMutations } from 'vuex'
export default {
data() {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
...mapMutations(['add'])
}
}
Action
Mutation 必须是同步函数，如果要处理异步任务则要使用Action。但是不能直接触发Action来变更数据。我们可以通过在Action中触发Muation间接变更数据。
定义Action
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
state.count++
}
},
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000)
}
}
})
触发Action的两种方式
- this.$store.dispatch(‘addAsync’)
<template>
<div>
<h3>当前的count值为：{{ $store.state.count }}</h3>
<button @click="btnHandler">+1 Async</button>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
btnHandler() {
this.$store.dispatch('addAsync')
},
}
}
</script>
- mapAction
import { mapState, mapActions } from 'vuex'
export default {
data() {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
...mapActions(['addAsync'])
}
}
以上为视频学习过程的笔记和一些简单的理解，若有不足和错误欢迎批评指正。
具体还是要看官方文档：https://vuex.vuejs.org/zh/。