📖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>&nbsp;&nbsp;&nbsp;{{$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>&nbsp;&nbsp;&nbsp;{{$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>&nbsp;&nbsp;&nbsp;{{$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'

标签