Vuex状态管理基础

state、mutations、actions、getters的使用

getters类似于组件中的computed

actions用在异步操作时 

// store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 100
  },
  mutations: {
    increase (state) {
      state.count++
    }
  },
  getters: {
    money: (state) => {
      return state.count + '元'
    }
  },
  actions: {
    // {state, commit}用到了赋值结构，其实原来是store
    asyncIncrease ({state, commit}) {
      setTimeout(() => {
        commit('increase')
      }, 1000)
    }
  }
})

使用actions需要用dispatch分发 

// Home.vue
<template>
  <div class="home">
    {{$store.state.count}}
    {{$store.getters.money}}
    <button @click="inc">加</button>
    <button @click="asyncInc">异步加</button>
  </div>
</template>

<script>
export default {
  name: 'home',
  methods: {
    inc () {
      this.$store.commit('increase')
    },
    asyncInc () {
      this.$store.dispatch('asyncIncrease')
    }
  }
}
</script>

一些帮助方法增加vuex使用体验

state、getters简写

import { mapState, mapGetters } from 'vuex' 后在计算属性中导入就可以直接使用count，就不需要this.$store.state.countle 

<template>
  <div class="home">
    {{count}}
    {{money}}
    <button @click="inc">加</button>
    <button @click="asyncInc">异步加</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'home',
  methods: {
    inc () {
      this.$store.commit('increase')
    },
    asyncInc () {
      this.$store.dispatch('asyncIncrease')
    }
  },
  computed: {
    // mapState是一个对象，类似{'count': this.$store.state.count}，使用...解构赋值
    ...mapState(['count']),
    ...mapGetters(['money'])
  }
}
</script>

 mutations、actions简写

mapMutations, mapActions必须写在方法中

方法中加入...mapMutations(['increase']),...mapActions(['asyncIncrease']),

后就可以直接使用 this.increase()，没必要使用this.$store.commit('increase')了

<template>
  <div class="home">
    {{count}}
    {{money}}
    <button @click="inc">加</button>
    <button @click="asyncInc">异步加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'home',
  methods: {
    ...mapMutations(['increase']),
    ...mapActions(['asyncIncrease']),
    inc () {
      // this.$store.commit('increase')
      this.increase()
    },
    asyncInc () {
      // this.$store.dispatch('asyncIncrease')
      this.asyncIncrease()
    }
  },
  computed: {
    // mapState是一个对象，类似{'count': this.$store.count}
    ...mapState(['count']),
    ...mapGetters(['money'])
  }
}
</script>

在actions中使用异步登录方法

promise对象接收一个参数为函数，函数有2个参数，resolve和reject

actions: {
    submitLogin({commit}) {
      return new Promise(resolve => {
        setTimeout(() => {
          commit('login')
          resolve(true)
        }, 2000)
      })
    }
  }


// 在组件的methods方法中获取异步的ret
async login () {
      let ret = await this.$store.dispatch('submitLogin')
      if (ret) { // 登录成功做重定向等操作
        const redirect = this.$route.query
        if (redirect) {
          this.$router.push(redirect)
        }
      } else {
        alert('登录失败，请重试')
      }
    }