vue-vuex-action的使用

• 创建项目选择router和vuex
• src/route/index.js中

import ActionView from '../views/ActionView.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/state',
    name:"StateView",
    component: StateView
    }
....

• src/store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  // data
  state: {
    num: 0,
    age: 18,
    msg: "haha",
    city:""
  },
  //  methods,处理state
  mutations: {
    addNum(state) {
      state.num++
    },
    setNum(state, value) {
      state.num = value
    },
    setCity(state,value) {
      state.city = value
    }
  },
  //  异步方法,如ajax
  actions: {
    setCity1: function(context) {
      let http_url = "https://geoapi.qweather.com/v2/city/lookup?location=chaoyang&key=XXX"
      axios.get(http_url).then((res)=>{
        console.log(res)
        // 这里的context就是store,通过修改mutations里面的方法修改state的值
        context.commit("setCity", res.data.location)
      })
     
    }
    
  },
  modules: {
  }
})

• src/views/ActionView.vue组件

<template>
    <div class="action">
        <h1>action:</h1>
          <h2>数字：{{num}}</h2>
        <button @click="getCityEvent">获取城市1</button>
        <button @click="setCity1">获取城市2</button>
         <button @click="addNum">新增数字</button>
        <ul>
            <li v-for="(item,index) in city" :key="index">{{item}}</li>
        </ul>
    </div>
</template>
<script>
// 这里可以用map导入sate,action,mutations，直接调用里面的方法
import { mapState,mapActions,mapMutations} from 'vuex'
let mapStateObj = mapState(['city','num'])
let mapActionObj = mapActions(['setCity1'])
let mapMutationsObj = mapMutations(['addNum'])

export default {
    data() {
        return {}
    },
    computed: {
        // 解析state中的参数
        ...mapStateObj,
       
    },
    methods:{
      getCityEvent:function() {
        // dispatch调用action中的方法
        this.$store.dispatch("setCity1")
      },
       // 解析action中的方法
        ...mapActionObj,
       // 解析Mutations中的方法
        ...mapMutationsObj  
    }
}
</script>