学习Vuex的基本使用

1. Vuex的基本原理
   
   三个主要属性：

State：状态数据，保存了可供所有组件公用的数据，严格模式下只可由mutation触发改变
Mutations：定义了一些列方法，用于同步修改state保存的数据，提供了一个默认参数state
Actions：定义了一系列方法，用于异步触发mutation，间接修改state保存的数据,有一个默认参数commit,触发mutation的函数
两个重要方法：
dispatch：触发action的函数，写法：this.$store.dispatch('action方法名',参数)

commit：触发mutation的函数，写法：this.$store.commit('mutations方法名',参数)
总结：state保存的变量，mutation通过一系列的计算，马上更新这些变量；action里封装一些异步操作，完了触发commit进而改变state保存的变量。
2. 一个基本的例子
1）首先用vue-cli创建一个带vuex（store）的基本工程
2）在store/index.js中定义一个基本的Store对象：

import Vuex from 'vuex'
import Vue from 'vue'
import returnCount from '../api/returnCount'

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        mutateCount:(state,count1)=>{
            state.count+=count1
        }
    },
    actions:{
        actionCount:async({commit},param)=>{
            let newCount=await returnCount()
            console.log('异步获取后台数据', newCount)
            commit('mutateCount',param*newCount)
        }
    },
    // getters:{

    // }
})

3）在App.vue中定义一个按钮，绑定一个鼠标点击书简changeCount(),并在其中用{{ this.$store.state.count }}显示state保存的count变量：

<template>
  <div id="app">
    {{ this.$store.state.count }}
    <button @click="changeCount">改变count</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    changeCount(param){
      this.$store.dispatch('actionCount',param)
    }
  }
}
</script>
...

其中按钮事件changeCount触发了一个actionCount方法，传递了一个参数10，action方法中使用async/await函数异步调用了写的一个模拟后台数据生成的api（src/api/returnCount）：

export default function returnCount(){
  return new Promise((resolve,reject)=>{
    console.log('后台生成数据中')
    setTimeout(()=>{
      resolve(5)
    },3000)
  })
}

这个异步操作是一个Promise对象，用于3秒后返回一个数字10
await等到获取到这个数字5，将其传给mutateCount方法，然后利用commit触发mutateCount，mutateCount方法直接改变count的值。
控制台输出结果：

点击按钮触发action，并传递一个参数“10”，action打印“后台数据生成中”，等3s后拿到后台数据5，计算得到一个新参数“50”，通过commit触发mutation，更新state的count为“50”