java1234开源博客系统
博客信息

Vuex状态集中式管理

0
发布时间:『 2019-08-04 22:29』  博客类别:Vue.js  阅读(223)

Vuex状态集中式管理


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

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


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


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


state,驱动应用的数据源;

view,以声明方式将 state 映射到视图;

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

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

QQ截图20190804210600.jpg


Vuex具体应用流图:

QQ截图20190804210654.jpg


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

GIF.gif

<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>




关键字:   vuex  
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有