Vuex详解

Vuex

引言

当我们的应用遇到多个组件需要共享状态时，会需要多个组件依赖于同一状态或者是来自不同视图的行为需要变更同一状态。以前的解决办法：

• 将数据以及操作数据的行为都定义在父组件，然后再将数据以及操作数据的行为传递给需要的各个子组件（可能需要多级传递）

传参的方法对于多层嵌套的组件将会非常繁琐，并且不能进行兄弟组件间的状态传递。对于非父子组件之间的通信（父——子-子、兄弟组件），如果要进行通信，还是很麻烦的。此时使用Vuex，就可以轻松进行组件间通信。

什么是Vuex

Vuex是一个专门为Vue.js应用开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。简单来说，就是对Vue的应用中多个组件的共享状态进行集中式的管理（读、写）

Vuex原理

• Vuex实现了一个单向数据流，在全局拥有一个State存放数据，
• 组件要更改State中的数据，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新
• 所有异步操作（调用后端接口异步获取更新数据）或批量的同步操作需要走Action(Action无法直接修改State)
• 根据State的变化，将数据渲染到视图上

工作流程：

View——>Actions——>Mutations——>State——>View

• 用户在视图上执行了某个事件，然后执行dispatch方法触发对应的action动作进行回应。

视图即Vue Components，html页面上接收用户操作。

dispatch触发方法主要是$store.dispatch(‘action名称’,data1)

• actions对应的事件处理函数，触发mutations，然后改变State。

action中的commit(‘mutation名称’)来触发mutations。

mutations里面包含多个更新state的方法的对象，commit对mutation进行提交

• State状态改变，视图内容也就变了。

getters是state对象读取方法 ($store.getters.xxx)，Vue Components通过该方法读取全局state对象。

用法

1、安装vuex

npm i vuex -S

2、示例

使用vue可以实现以上效果：

<template>
  <div>
    <p>click {{count}} times,count is {{numType}}</p>
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
    <button @click="oddincre">increment if odd</button>
    <button @click="asyncincre">increment async</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data(){
    return{
      count:0
    }
  },
  computed:{
    numType(){
      return this.count%2==0?'even':'odd'
    }
  },
  methods:{
    increment(){
      this.count++
    },
    decrement(){
      this.count--
    },
    oddincre(){
      if(this.count%2==1) this.count++
    },
    asyncincre(){
      setInterval(()=>{
        this.count++
      },2000)
    }
  }
}
</script>

使用Vuex实现：

环境：

store.js文件：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store=new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        increment(state){
            state.count++
        },
        decrement(state){
            state.count--
        }
    },
    getters:{
        numType(state){
            return state.count%2==0?'even':'odd'
        }
    },
    actions:{
        oddincre({commit,state}){
            if(state.count%2==1){
                commit('increment')
            }
        },
        asyncincre({commit}){
            setInterval(()=>{
                commit('increment')
            },2000);
        }
    }
})
export default store;

将store.js导入main.js入口文件中：

<template>
  <div>
    <p>click {{count}} times,count is {{numType}}</p>
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
    <button @click="oddincre">increment if odd</button>
    <button @click="asyncincre">increment async</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed:{
    count(){
      return this.$store.state.count
    },
    numType() {
      return this.$store.getters.numType
    }
  },
  methods:{
    increment(){
      this.$store.commit('increment')
    },
    decrement(){
      this.$store.commit('decrement')
    },
    oddincre(){
      this.$store.dispatch('oddincre')   //触发store中对应的action调用
    },
    asyncincre(){
      this.$store.dispatch('asyncincre')
    }
  }
}
</script>

可以看出，改变store中的状态唯一途径就是显式提交（commit提交）mutations。

使用辅助函数优化：

import {mapActions,mapState,mapGetters,mapMutations} from "vuex";
export default {
  name: 'App',
  components: {
  },
  computed:{
    ...mapState(["count"]),
    ...mapGetters(['numType'])
  },
  methods:{
    ...mapActions(['oddincre','asyncincre']),
    ...mapMutations(['increment','decrement'])
  }
}

（1）关于getter:

可以看做在获取数据之前进行的一种再编辑，相当于对数据的一个过滤和加工。getter就像计算属性一样，它的返回值会根据它的依赖性被缓存起来，只有当它的依赖性发送改变时，getter才会被重新计算。

（2）action和mutations的区别：

actions和Mutations的功能基本一样，不同的是，actions是异步的改变state状态，而Mutations是同步改变状态。