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

最新推荐文章于 2023-08-01 00:36:19 发布

cxy_pan0913

最新推荐文章于 2023-08-01 00:36:19 发布

阅读量1.6k

点赞数 2

文章标签：前端 vue 前端框架值传递开发语言

本文链接：https://blog.csdn.net/cxy_pan0913/article/details/123011030

版权

数据请求闭环：

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

<template>
  <div>
      <button @click="fun()">点击获取数据</button>
  </div>
</template>

<script>
export default {
methods:{
  fun(){
    this.$store.dispatch("link",{url:"/data/link"})
  }
}
}
</script>
<style>
</style>

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)