Vuex的学习
1.Vuex概述
1.1 组件之间共享数据的方式
父向子传值：v-bind属性绑定（语法糖：）
子向父传值：v-on事件绑定(语法糖@)
兄弟组件之间共享数据：EventBus
- $on 数据接收方
- $emit 数据发送方
1.2 Vuex是什么
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便实现组件之间的数据共享。
2. Vuex的基本使用
2.1 安装Vuex
- 安装Vuex依赖包
npm install vuex --save
- 导入Vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
- 创建store对象
const store = new Vuex.Store({
// state中存放的就是全局共享的数据
state: {
count:0
}
})
- 将store对象挂载到Vue实例中
import Vue from 'vue'
import App from './App'
import router from './router'
// 这里的store的s要小写
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
这样，所有的组件就可以直接从store中获取全局的数据了。
3. Vuex的核心概念
3.1 核心概念描述
Vuex中的主要核心概念如下：
- State
- Mutation
- Action
- Getter
3.2 State
State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储
组件中访问State中数据的方式：
- this.$store.state.全局数据名称
<template>
<div class="add">
<!-- 这里this可以省略 -->
<h2>当前数值为：{{ $store.state.count }}</h2>
<button>+</button>
</div>
</template>
<script>
export default {
name: "Addition",
data() {
return {};
},
};
</script>
<style scoped>
</style>
- 使用mapState函数
// 1. 从Vuex中导入mapState函数
import { mapState } from 'vuex'
// 2. 将当前组件需要的全局数据映射为当前组件的计算属性
computed:{
...mapState(['count'])
}
<template>
<div class="sub">
<h2>当前数值为：{{count}}</h2>
<button>-</button>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "Subtraction",
data() {
return {};
},
computed: {
...mapState(["count"]),
},
};
</script>
<style scoped>
</style>
3.3 Mutation
Mutation用于变更Store中的数据
- 只能通过Mutation变更Store数据，不可以直接操作Store中的数据
- 便于集中监控所有全局数据的变化
注：不要再Mutations.js中写异步代码, 如果需要异步代码，到Actions中写
定义Muattion
const store = new Vuex.Store({
// state中存放的就是全局共享的数据
state: {
count:0
},
mutations:{
add(state){
// 变更数据
state.count += 1
}
}
})
使用Mutation的方式
- this.$store.commit(‘mutations中定义的方法’)
methods:{
handle(){
// 触发mutations的第一种方式
this.$store.commit('add')
}
}
使用Mutation传递参数
mutations:{
addN(state, step) {
state.count += step
}
}
methods:{
handle(){
// 触发mutations时携带参数
this.$store.commit('addN', 3)
}
}
- 使用mapMuattions函数
// 1. 从vuex中导入mapMutations函数
import { mapMutations } from 'vuex'
// 2. 将指定的mutations函数映射为当前组件的methods函数
methods:{
...mapMutations(['add', 'addN'])
}
// 减法组件中<templte>中的代码
<template>
<div class="sub">
<h2>当前数值为：{{ count }}</h2>
<button @click="sub">-</button>
<button @click="subN(3)">-N</button>
</div>
</template>
// 减法组件中<script>中的代码
methods: {
// ...mapMutations写到methods中
...mapMutations(["sub", "subN"])
},
// mutations.js中的代码
sub(state) {
state.count -= 1
},
subN(state, step) {
state.count -= step
}
3.4 Action
Action用于处理异步任务
// 定义Action
actions:{
addAsync(context){
setTimeout(() => {
// 在actions中不能直接修改state中的数据
// 必须通过调用mutations中的方法才能修改
context.commit('add')
}, 1000)
}
}
触发Action的方式
- this.$store.dispatch(‘在actions中定义的函数名’)
// 使用Action
methods(){
handle(){
this.$store.dispatch('addAsync')
}
}
触发actions异步任务时携带参数
actions:{
addNAsync(context, step){
setTimeout(() => {
// 在actions中不能直接修改state中的数据
// 必须通过调用mutations中的方法才能修改
context.commit('addN', step)
}, 1000)
}
}
methods(){
handle(){
this.$store.dispatch('addNAsync', 3)
}
}
- 使用mapActions函数
// 导入mapActions函数
import { mapActions } from 'vuex'
// 将指定的actions函数映射为当前组件的methods函数
methods:{
...mapActions(['addAsync', 'addNAsync'])
}
3.5 Getter
Getter 用于对Store中的数据进行加工处理形成新的数据
- 类似于计算属性
- Store中的数据变化，Getter的数据也会变化
getters:{
showNum: state => {
return '当前最新的数量是:' + state.count
}
}
使用getters的方式:
- this.$store.getters.‘getters中定义的函数名’
<template>
<div class="add">
<!-- 这里this可以省略 -->
<!-- <h2>当前数值为：{{ $store.state.count }}</h2> -->
<h2>{{$store.getters.showNum}}</h2>
<button @click="handle">+</button>
<button @click="handle2">+N</button>
</div>
</template>
- 使用mapGetters函数
// 导入mapGetters函数
import { mapGetters} from 'vuex'
// 将指定的getters函数映射为当前组件的计算属性
computed:{
...mapActions(['addAsync', 'addNAsync'])
}
