Vuex的使用方法

核心概念：

State：包含了store中的各个状态

Getters：对State中的数据进行包装然后返回，可以认为是store的计算属性

Mutations：对State中的数据进行操作的一系列方法，只能是同步的方法

Actions：对State中的数据进行操作的一系列方法，可以是异步的方法，通过调用Mutation中的方法实现对数据的操作

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  // 不能直接对state里面的数据进行操作，需要通过mutation
  mutations: {
    add (state) {
      state.count++
    },
    sub (state) {
      state.count--
    },
    addN (state, step) {
      state.count += step
    },
    subN (state, step) {
      state.count -= step
    }
  },
  // 异步方法写在这里，操作state数据，需要调用mutation
  actions: {
    addAsync (context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    },
    // 使用ES6的解构赋值可以简写为：
    // addAsync ({ commit }) {
    //   setTimeout(() => {
    //     commit('addN')
    //   }, 1000)
    // },
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    },
    // 使用ES6的解构赋值可以简写为：
    // addNAsync ({ commit }, step) {
    //   setTimeout(() => {
    //     commit('addN', step)
    //   }, 1000)
    // },
    subAsync (context) {
      setTimeout(() => {
        context.commit('sub')
      }, 1000)
    },
    subNAsync (context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    }
  },
  // getters不会修改数据只是对数据进行包装然后返回，相当于计算属性
  getters: {
    showNum (state) {
      return '当前最新count值为：' + state.count
    }
  },
  modules: {}
})

使用Vuex的第一种方式：

<template>
  <div>
    <button @click="sub">-1</button>
    <button @click="subN(3)">-N</button>
    <button @click="subAsync">-1 async</button>
    <button @click="subNAsync(3)">-N async</button>
    <p>{{showNum}}</p>
    <form action="#">
      <label for="count">最新的count值：</label>
      <input id="count" type="text" :value="count" />
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {
    // 使用this.$store.state调用Vuex定义的state
    count () {
      return this.$store.state.count
    },
    // 使用this.$store.getters调用Vuex定义的getters
    showNum () {
      return this.$store.getters.showNum
    }
  },
  methods: {
    // 使用this.$store.commit调用Vuex定义的mutation
    sub () {
      this.$store.commit('sub')
    },
    subN (step) {
      this.$store.commit('subN', step)
    },
    // 使用this.$store.dispatch调用Vuex定义的action
    subAsync () {
      this.$store.dispatch('subAsync')
    },
    subNAsync (step) {
      this.$store.dispatch('subNAsync', step)
    }
  }
}
</script>

使用Vuex的第二种方式：

<template>
  <div>
    <button @click="add">+1</button>
    <button @click="addN(3)">+N</button>
    <button @click="addAsync">+1 async</button>
    <button @click="addNAsync(3)">+N async</button>
    <p>{{showNum}}</p>
    <form action="#">
      <label for="count">最新的count值：</label>
      <input id="count" type="text" :value="count" />
    </form>
  </div>
</template>

<script>
// 1.导入mapState,mapMutations,mapActions,mapGetters
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    // 2.把mapState,mapGetters里的全局变量映射为计算属性
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    // 2.把mapMutations,mapActions里的方法映射到methods里面
    ...mapMutations(['add', 'addN']),
    ...mapActions(['addAsync', 'addNAsync'])
  }
}
</script>