vuex数据请求(state,actions,mutations,modules,getters)步骤详解

数据请求闭环：

1、在页面中通过事件触发一个函数

2、通过dispatch触发一个actions

created(){
        this.$store.dispatch("link",{url:"/data/link"})
    }

3.编写对应的actions

  actions: {
    getaxios(){
      
    }
  }

4、引用数据请求并且发送

5.发送异步操作

6.把请求来的数据交给mutations来修改state

import Vue from 'vue'
import Vuex from 'vuex'
// 4.引用数据请求
import getlink from "@/apis/getapi.js"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {//创建数据的类似于组件中的data

  },
  mutations: {
  },
  actions: {
    // 3编写对应的actions
    getaxios(context,payload){
      console.log(context)
      // 5.发送异步操作
      getlink(payload.url).then((ok)=>{
        console.log(ok.data.data)
        // 6.把请求来的数据交给mutations来修改state
        context.commit("uparr",{arrdata:ok.data.data})
      })
    }
  },
  modules: {
  }
})

 7、创建对应的mutations

 // 7创建对应的mutations
    uparr(state,payload){
      // 8把请求来的数据修改state
      state.arr=payload.arrdata
    }

8、页面显示