学习vuex(一)以计数器为例

学习vuex之前要先知道它是什么以及它能用来做什么和应该怎么用?

什么是vuex?

官网的定义vuex为状态管理模式，可以集中管理组件的状态。

vuex可以用来做什么?

假如有好几个不同地方的组件视图，需要显示同一个数据源，当数据的状态发生改变时，他们也要同时改变。如果使用传参或者复制计算属性来实现，是使代码变得冗余且难以维护。如果组件之间的关系不是父子关系也难以传递。

在怎么用vuex之前，先了解它有什么。
vuex的核心是store对象，store里面可以保存多个state,也就是状态。在根元素创建new Vue({store})的时候引入store，这样就可以全局使用单例状态树，通过$store.state.来获取。
mutation:保存改变状态方法,必须是同步的。commit('func')的方式来改变
getter:用来派生出另一种状态，例如说判断count是奇数还是偶数
actions:与mutation类似，但本质是提交mutation,区别在于可以异步请求

使用之前先了解一下mapGatters和mapActions辅助方法

试想一下，假如一个应用好几个地方都会有判断状态count是奇偶数的需求,如果在每一个组件computed:{ evenOrOdd:this.$store.state.count%2===0?'even':'odd' }，是不是有一些多余呢,mapGetters可以把getter里的计算属性映射到computed中,让我们省去了这一部分工作,mapActions同理。

怎么用vuex

1.安装依赖 npm install vuex

2.将store单独拎出来管理，创建state，mutation，actions，getters。
定义好状态和方法后,在new Vuex.Store({state，mutation，actions，getters})

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)
//状态对象
const state = {
    count:0,
    times:0
}
//改变状态的方法
const mutations = {
  increment(state){
    state.count++
    state.times++
  },
  decrement(state){
    state.count--
    state.times++
  }
}
// 异步执行
const actions = {
  increment:({commit}) =>commit('increment'),
  decrement:({commit}) =>commit('decrement'),
  isEvenorOdd({commit,state}){
    if(state.count%2===0){
      commit('increment');
    }
  }
}
const getters = {
  evenOrOdd:state => state.count%2===0?'even':'odd'
}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

3.创建有状态管理的counter.vue组件,通过$store.state....可以获取到状态对象

<template>
  <div class="">
    <span @click="decrement">-</span>
    <span> {{$store.state.count}} </span>
    <span @click="increment">+</span>
    <button type="button" name="button" @click="isEvenorOdd">if count is even</button>
    <p>click {{$store.state.times}}  times,count is {{evenOrOdd}}</p>
  </div>
</template>
<script>
import { mapGetters,mapActions } from 'vuex'
export default {
    computed:{
      ...mapGetters({
        'evenOrOdd':'evenOrOdd'
      })
    },
    methods:mapActions([
      'increment',
      'decrement',
      'isEvenorOdd'
    ])
}
</script>

4.在入口文件index.js增加store对象

new Vue({
    router:router,
    store,
    render:(h)=> h(App)
}).$mount(root)

实现效果

每次点击次数都会累加,count改变，会判断出count是奇数还是偶数
当count为偶数时 if count is even 可以点击