vuex中actions的使用

创建方法

actions: {
    getLyricsList:async function(context,value){
      let res = await getLyrics(value)
    }
  },

相关参数

context:{

        state         等同 =>    store.$state

        commit     等同 =>    store.$commit

        dispatch    等同 =>    store.$dispatch

        getters      等同 =>    store.$getters        

}

使用方法

1. 直接使用

this.$store.dispatch('名字', 参数)

2. 通过辅助函数使用

methods: {

        ...mapActions(['名字']),

}

import { mapActions } from 'vuex'
export default {
	methods:{
		...mapActions([
			'getLyricsList'
		])
	}
}

调用actions方法发送异步请求更改state数据

mutations: {
    UpDataMusicLyrics(state,value){
      state.MusicLyrics = value
    }
  },
  actions: {
    getLyricsList:async function(context,value){
      let res = await getLyrics(value)
      context.commit('UpDataMusicLyrics',res.data.lrc.lyric)
    }
  },