Vuex的初探与实战小结

1.概述

每个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Vuex 和单纯的全局对象有如下两点不一样：

1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地获得高效更新；2.你不能直接改变 store 中的状态。改变 store 中的状态的惟一途径就是显式地提交 (commit) mutation。这样使得咱们能够方便地跟踪每个状态的变化，从而让咱们可以实现一些工具帮助咱们更好地了解咱们的应用

**2.安装使用 **

2.1.使用Vue-cli开发安装vue包

cnpm install vuex --save

2.2.在src目录下建立store文件夹并建立index.js以下(src/store/index.js)

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex);
 
export default new Vuex.Store({
 state: {
 
 },
 getters: {
 
 },
 mutations: {
 
 },
 actions: {
 
 }
});

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

而后在src文件下的main.js中使用

import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
 
 
new Vue({
 el: '#app',
 store,
 components: { App },
 template: '<App/>'
})

3.用法简介

** 3.1.state**

state是保存共享数据的，如今改store/index.js以下：

state: {
  count:0
 },

在components目录下建立Index.vue如：

<template>
 <div class="index">
  {{count}}
 </div>
</template>
 
<script>
 export default {
  name: "index",
  computed:{
   count(){
    return this.$store.state.count;
   }
  }
 }
</script>

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

结果以下： 咱们能够经过组件的计算属性来保存state里面的值，那么问题来了，若是store太多的话，咱们组件里面的计算属性岂不是成了这个样子：

computed:{
 count(){
   return this.$store.state.count;
 }，
  stateA(){
   return this.$store.state.stateA;
  }，
  stateB(){
   return this.$store.state.stateB;
  }
}

这样获取共享状态的数据也没有什么问题不过看起来仍是有大量的重复冗余代码，咱们可使用 mapState 辅助函数帮助咱们生成计算属性，让你少按几回键：

当映射的计算属性的名称与 state 的子节点名称相同时，咱们也能够给mapState传一个字符串数组。

import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
  }
 }

小结：使用 Vuex 并不意味着你须要将全部的状态放入 Vuex。虽然将全部的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。若是有些状态严格属于单个组件，最好仍是做为组件的局部状态。

3.2.getter

有的时候咱们须要对共享状态里面的某一个属性作一些处理后再使用，咱们能够把数据获取后再在组件的计算属性中处理，举个例子以下：

// store/index.js
state: {
  count:0,
  numbers:[0,1,2,3,4,5,6,7,8]
 },
// Index组件
<template>
 <div class="index">
  {{count}}
  <br>
  {{numbers.join()}}
 </div>
</template>
<script>
 import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
   numbers(){
    return this.$store.state.numbers.filter((item)=>{
     return item>3;
    })
   }
  }
 }
</script>

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

结果以下： 那么问题来了，若是多个组件都要作一样的处理，咱们就须要把一份代码复制到多个地方，显然是不大合理的，因而有了getter，能够理解为组件里面的计算属性。示例以下：

/ store/index.js
getters: {
  filterNumbers(state){
   return state.numbers.filter((item)=>{
    return item>3;
   })
  }
 },
// Index组件
<template>
 <div class="index">
  {{count}}
  <br>
  {{filterNumbers.join()}}
 </div>
</template>
 
<script>
 import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
   filterNumbers(){
    return this.$store.getters.filterNumbers;
   }
  }
 }
</script>

结果彻底同样，咱们能够根据this.$store.getters.属性名来获取getters，也能够经过 mapGetters 辅助函数将 store 中的 getter 映射到局部计算属性：

具体实现方式以下：

<template>
 <div class="index">
  {{count}}
  <br>
  {{filterNumbers.join()}}
  <br>
  {{antherNumbers.join()}}
 </div>
</template>
 
<script>
 import {mapState,mapGetters} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),6
   ...mapGetters(['filterNumbers']),
   ...mapGetters({
    antherNumbers:'filterNumbers'
   })
  }
 }
</script>

若是用同一名字直接把数组做为参数，若是想改一个名字，能够传入一个对象做为参数，结果以下：

3.3.mutation

在组件内，来自store的数据只能读取，不能手动改变，改变store中数据惟一的途径就是显示的提交mutations。Vuex 中的 mutation 很是相似于事件：每一个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是咱们实际进行状态更改的地方，而且它会接受 state 做为第一个参数。改变代码以下：

// store/index.js
mutations: {
 add(state){
  state.count++;
 }
},
 
// Index组件
**
  <button @click="add">+</button>
**
  methods:{
   add(){
    this.$store.commit('add');
    console.log(this.count);
   }
**

连续点击5次增长按钮，发现count的值也改变了。固然，咱们也能够传参进去

// store/index.js
mutations: {
 add(state,n){
  state.count+=n;
 }
},
 
// Index组件
**
  <button @click="add">+</button>
**
  methods:{
   add(){
    this.$store.commit('add'，10);
    console.log(this.count);
   }
**

触发方法语句为：this.$store.commit(方法名);也可使用辅助函数mapMutations代替：

methods:{
  ...mapMutations(['add']),
}

3.4.action

前面咱们讲过，mutation有必须同步执行这个限制，咱们在业务需求中有时候须要在获取ajax请求数据以后再操做或定时器操做数据，这些都属于异步请求，要用actions来实现。具体实现以下：

// store/index.js
mutations: {
  changeCount(state){
   state.count=3000;
  },
 },
 actions: {
  changeCount3000s(context){
   setTimeout(()=>{
    context.commit('changeCount')
   },3000)
 
// Index组件
<button @click="changeCount3000s">点击按钮3s后count的值改变</button>
methods:{
 ...mapMutations(['add']),
  changeCount3000s(){
    this.$store.dispatch('changeCount3000s');
  }
 }

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

咱们在点击按钮3s后count的值改变为3000，咱们能够经过this.$store.dispatch(方法名)来触发事件，也能够经过辅助函数mapActions来触发。

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
  methods:{
   ...mapMutations(['add']),
   ...mapActions(['changeCount3000s'])
  }

学会以上几个属性的使用基本就能够知足平时业务中的需求了，但使用Vuex会有必定的门槛和复杂性，它的主要使用场景是大型单页面应用，若是你的项目不是很复杂，用一个bus也能够实现数据的共享，可是它在数据管理，维护，还只是一个简单的组件，而Vuex能够更优雅高效地完成状态管理，因此，是否使用Vuex取决于你的团队和技术储备。