Vuex状态集中式管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

官方用户指南 https://vuex.vuejs.org/zh/

简单的说，在复杂应用中，Vuex 对vue应用中多个组件的共享状态进行集中式的管理；

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；

view，以声明方式将 state 映射到视图；

actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

Vuex具体应用流图：

具体通过计数器简单实例来理解：

<template>
  <div>
    <p>current Number {{number}} is {{evenOrOdd}}</p>
    <button @click="increment()">+</button>
    <button @click="decrement()">-</button>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        number: 0
      }
    },
    methods:{
      increment(){
        this.number++
      },
      decrement(){
        this.number--
      }
    },
    computed:{
      evenOrOdd(){
        return this.number%2==0 ? '偶数':'奇数'
      }
    }
  }
</script>

<style scoped>

</style>

这个是以前的代码逻辑实现；

现在改用 vuex；

首先安装vuex   

npm install --save vuex

store对象编写 store.js

/*
vuex的核心管理对象模块:store
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state={
  number: 1
}

const mutations={
  incr(state){
      state.number++
  },
  decr(state){
    state.number--
  }
}

const actions={
  increment({commit}){
    // 提交到mutations
    commit('incr')
  },
  decrement({commit,state}){
    if(state.number>0){
      // 提交到mutations
      commit('decr')
    }
  }
}

const getters={
  evenOrOdd(state){
    return state.number%2==0 ? '偶数':'奇数'
  }
}


export default new Vuex.Store({
  state, // 状态对象
  mutations, // 用来更新state的对象
  actions, // 事件对调函数，调用mutations
  getters // 计算属性函数
})

App.vue

<template>
  <div>
    <p>current Number {{$store.state.number}} is {{$store.getters.evenOrOdd}}</p>
    <button @click="increment()">+</button>
    <button @click="decrement()">-</button>
  </div>
</template>

<script>

  export default {
    methods:{
      increment(){
        // 调用action
        this.$store.dispatch('increment')
      },
      decrement(){
        // 调用action
        this.$store.dispatch('decrement')
      }
    }
  }
</script>

<style scoped>

</style>

mapState,mapGetters,mapActions简化编写：

<template>
  <div>
    <p>current Number {{number}} is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>

  import {mapState,mapGetters,mapActions} from 'vuex'
  export default {
    computed:{
      ...mapState(['number']),
      ...mapGetters(['evenOrOdd'])
    },
    methods:{
      ...mapActions(['increment','decrement'])
    }
  }
</script>

<style scoped>

</style>