action异步传输

action异步传输

import { createStore } from 'vuex'

export default createStore({
  //data
  state: {
     num:0,
     username:'农夫山泉有点甜',
     password:123456,
     duanzis:null
  },
  getters: {
    reverseMsg:function(state){
      return state.username.split('').reverse().join('')
    },
    mixinMsg:function(state){
      return function(val){
        return val+state.password
      }
    }
  },
  //methods 处理状态
  mutations: {
    addNum(state){
      state.num+=2
    },
    setNum(state,value){
      state.num = value
    },
    setDuanzi:function(state,value){
      state.duanzis = value
    }
  },
  //异步方法
  actions: {
    setDz:function(content){
      let httpUrl ='https://api.apiopen.top/musicRankings'
    fetch(httpUrl).then(res=>res.json()).then(res=>{
      console.log(res);
      console.log(content);
      //通过muation来设置state
      content.commit('setDuanzi',res.result)
    })
    }
  },
  //模块
  modules: {
  }
})

<template>
  <div>
      <h1>action</h1>
      <h1>{{num}}</h1>
      <button @click="addNum">添加Num</button>
      <button @click="getDuanzi">点击获取段子1</button>
      <button @click="setDz">点击获取段子2</button>
        <ul>
            <li v-for=" (item,index) in duanzis " :key="index">{{index}}:{{item.name}}</li>
        </ul>
        
  </div>
</template>

<script>

import {mapState,mapActions,mapMutations} from 'vuex'
let mapStateObj = mapState(['duanzis','num'])
let mapActionsObj = mapActions(['setDz'])
let mapMutationsObj = mapMutations(['addNum','setNum'])
export default {
    computed: {
        ...mapStateObj
    },
    methods:{
        getDuanzi:function(){
            this.$store.dispatch('setDz')
            console.log(this);
        },
        ...mapActionsObj,
        ...mapMutationsObj 
    }
}
</script>

<style>

</style>