📖Vuex 学习应用与核心概念
前言
在前面我们讲过 Vuex 的安装与实现部署，这篇文章我们主要是讲 Vuex 中的一些核心概念，还有实际的运用
我们先来讲讲 Vuex 中核心概念
state (公共数据源)
唯一的公共数据源，所有的共享数据同一放到 store 的 state 中进行存储
state => mapStates (辅助函数)
当一个组件需要获取多个数据的时候，重复的声明数据会导致代码的冗余， 这时候使用 mapState 辅助函数批量生成数据
Mutation (数据修改)
1：只能通过 Mutation 修改 state 中的数据，在组件中之间修改全局数据是非法操作(虽然不会报错，但是不建议这么做)
2：虽然通过 Mutation 去修改全局数据比较繁琐，但是可以将集中监控数据的变化
3：在 Mutation 中不可使用异步的函数(如:setTimeout())
Mutation => mapMutations
可以使用 mapMutations 将store 中的函数映射到当前组件
Action (异步任务)
1：如果项目中需要使用异步操作修改全局数据，则必须通过 Action ,而不能直接使用 Mutation
2：但是 Action 中还是要通过触发 Mutation 的方式修改数据
Action => mapActions
可以使用 mapActions 将 Action 中的函数映射到当前组件
Getter (包装数据)
1：Getter 用于对 state 中的数据进行包装，但不会改变 state 中的源数据，类似Vue中的计算属性
2：如果 soter 中的数据发生变化，那么 getter 也会发生改变
Getter => mapGetters
可以使用 …mapGetters 直接将Getter中的函数直接映射到当前组件
Module (模块化)
1：由于这个比较特殊我这里就展示不展示了感兴趣的可以去官网看看，传送门 》》
state 获取全局数据
你需要首先在 store 中创建state
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
count:1
}
})
//方式一 (直接用过 this.$store 获取)
//two.vue
<template>
<div id="vuex_two">
<button>two.vue的内容：{{this.$store.state.count}}</button>
</div>
</template>
<script>
export default {
name: 'vuex_two',
data(){
return {}
},
}
</script>
//方式二 (通过引入 ...mapStates 获取)
//one.vue
<template>
<div id="vuex_one">
<p>one.vue的内容：{{count}}</p>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'vuex_one',
data(){
return {}
},
computed:{
...mapState(['count'])
}
}
</script>
Mutation 修改全局数据
//store.js 配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
count:1
},mutations:{
add(state){
state.count++;
},
one_add(state,num){
state.count+=num;
}
}
})
export default store
//方式一 (通过 this.$store.commit 携带参数修改数据)
//two.vue
<template>
<div id="vuex_two">
<p> <button @click='two_add'>全局数据+{{two_num}}</button> {{$store.state.count}}</p>
</div>
</template>
<script>
export default {
name: 'vuex_two',
data(){
return {
two_num:3
}
},methods:{
two_add:function(){
this.$store.commit('one_add',this.two_num)
}
}
}
</script>
//方式二 (通过 ...mapMutations 将需要的 mutations 函数映射为当前组件的 methods() 方法)
//one.vue
<template>
<div id="vuex_one">
<p><button @click='one_add'>数据+1</button>{{count}}</p>
</div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
name: 'vuex_one',
data(){
return {}
},methods:{
...mapMutations(['add']),
one_add:function(){
this.add();
}
},
computed:{
...mapState(['count'])
}
}
</script>
Action (异步任务)
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
count:1
},mutations:{
add(state){
state.count++;
},
one_add(state,num){
state.count+=num;
}
},
actions:{
two_time:function(time,num){
setTimeout(()=>{
time.commit('one_add',num);
},1000)
},
one_time:function(time){
setTimeout(()=>{
time.commit('add');
},1000)
}
}
})
export default store
//方式一 (通过 this.$store.dispatch('时间名') 执行，带参数执行)
//two.vue
<template>
<div id="vuex_two">
<p> <button @click='two_add'>全局数据+{{two_num}}</button> {{$store.state.count}}</p>
<p><button@click='vuex_time'>Action 异步处理 + {{two_num}}</button>{{$store.state.count}} <b>延迟一秒</b></p>
</div>
</template>
<script>
export default {
name: 'vuex_two',
data(){
return {
two_num:3
}
},methods:{
two_add:function(){
this.$store.commit('one_add',this.two_num)
},
vuex_time:function(){
this.$store.dispatch('one_time',this.two_num)
}
}
}
</script>
//方式二 (通过 ...mapActions 将指定的 Action 映射到当前组件)
//one.vue
<template>
<div id="vuex_one">
<p><button @click='one_add'>数据+1</button>{{count}}</p>
<p><button @click='map_time'>...mapActions</button> <b>延迟 1 秒</b></p>
</div>
</template>
<script>
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
name: 'vuex_one',
data(){
return {}
},methods:{
...mapMutations(['add']),
...mapActions(['one_time']),
one_add:function(){
this.add();
},
map_time:function(){
this.one_time();
}
},
computed:{
...mapState(['count'])
}
}
</script>
Getteer (加工数据)
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
count:1
},mutations:{
add(state){
state.count++;
},
one_add(state,num){
state.count+=num;
}
},
actions:{
two_time:function(time,num){
setTimeout(()=>{
time.commit('one_add',num);
},1000)
},
one_time:function(time){
setTimeout(()=>{
time.commit('add');
},1000)
}
},
getters:{
showcou:function(ns) {
return '当前的最新数字为：【'+ns.count+'】';
}
}
})
export default store
//方式一 (通过 this.$store.getters.showcou 直接引入)
//two.vue
<template>
<div id="vuex_two">
<p> <button @click='two_add'>全局数据+{{two_num}}</button> {{$store.state.count}}</p>
<p><button@click='vuex_time'>Action 异步处理 + {{two_num}}</button>{{$store.state.count}} <b>延迟一秒</b></p>
<p>使用 $store.getters.showcou：<b>{{$store.getters.showcou}}</b></p>
</div>
</template>
<script>
export default {
name: 'vuex_two',
data(){
return {
two_num:3
}
},methods:{
two_add:function(){
this.$store.commit('one_add',this.two_num)
},
vuex_time:function(){
this.$store.dispatch('two_time',this.two_num)
}
}
}
</script>
//方式2 (使用 ...mapGetters 将函数映射到当前组件)
//one.vue
<template>
<div id="vuex_one">
<p><button @click='one_add'>数据+1</button>{{count}}</p>
<p><button @click='map_time'>...mapActions</button> <b>延迟 1 秒</b></p>
<p>使用...mapGetters：<b>{{showcou}}</b></p>
</div>
</template>
<script>
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex'
export default {
name: 'vuex_one',
data(){
return {}
},methods:{
...mapMutations(['add']),
...mapActions(['one_time']),
one_add:function(){
this.add();
},
map_time:function(){
this.one_time();
}
},
computed:{
...mapState(['count']),
...mapGetters(['showcou'])
}
}
</script>
总结
核心概念
//store.js 核心概念为：state,mutations,actions,getters,module
const store = new Vuex.Store({
state:{...},
mutations:{...},
actions:{...},
getters:{...}
})
核心概念 的使用
//state
...mapState(['count'])
{{$store.state.count}}
//mutations
this.$store.commit('one_add',传参)
...mapMutations(['add'])
//actions
this.$store.dispatch('two_time',传参)
...mapActions(['one_time'])
//getters
{{$store.getters.showcou}}
...mapGetters(['showcou'])
需要注意：…mapState 与 …mapGetters 需要放到 computed 或 watch 中监听，且使用 … 时需要注意当前组件是否引入 vuex
引入 vuex
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex'
🧐发表评论