vue.js中引入vuex储存接口数据及调用的详细流程

下面我将为你详细讲解在Vue.js中如何通过Vuex储存接口数据及调用的详细流程。

1. 什么是Vuex？

Vuex是Vue.js的官方状态管理库，它可以将多个组件中的共享状态抽离出来，以统一的方式管理。Vuex的核心概念包括：

state: 状态，用于存储数据
getter: 获取状态，类似组件中的计算属性
mutation: 修改状态，只能同步修改
action：类似于Mutation，但其可以异步执行，可以包含任意异步操作

2. 如何在Vue中引入Vuex？

在Vue中引入Vuex非常简单，只需要按照以下步骤进行即可：

安装Vuex：通过npm安装

npm install vuex --save

在Vue项目中引入Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

export default store

在Vue项目的入口文件main.js中引入store

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store, // 注入store
  render: h => h(App)
}).$mount('#app')

3. 如何利用Vuex储存接口数据及调用？

在实际开发中，我们通常会通过接口获取数据并展示在页面上，接下来我们将通过一个实例来说明如何在Vue中利用Vuex储存接口数据及调用：

示例1：获取数据列表并展示

我们通过接口获取数据，并将其存储在Vuex的项目状态中：

const store = new Vuex.Store({
  state: {
    list: [] // 用于存储接口数据列表
  },
  mutations: {
    setList(state, list) {
      state.list = list
    }
  },
  actions: {
    async getList({commit}) {
      const res = await axios.get('/api/list')
      commit('setList', res.data) // 将接口数据写入项目状态中
    }
  }
})

在需要展示数据的组件中获取列表数据，将数据展示在页面上：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <button @click="handleGetList">获取数据列表</button>
  </div>
</template>

<script>
export default {
  computed: {
    list() {
      return this.$store.state.list
    }
  },
  methods: {
    handleGetList() {
      this.$store.dispatch('getList')
    }
  }
}
</script>

示例2：提交表单数据

假设我们有一个表单，需要将表单数据提供给接口做进一步处理，我们可以使用Vuex来处理表单提交数据的流程。

我们新建一个state来存放表单数据：

const store = new Vuex.Store({
  state: {
    form: {
      name: '',
      age: ''
    }
  },
  mutations: {
    setForm(state, form) {
      state.form = form
    }
  },
  actions: {
    async submitForm({commit, state}) {
      const res = await axios.post('/api/form', state.form)
      // 接口请求成功，进行相关操作
    }
  }
})

在表单组件中将表单数据存入Vuex的state中：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.name" type="text" placeholder="姓名" />
    <input v-model="form.age" type="text" placeholder="年龄" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  computed: {
    form() {
      return this.$store.state.form
    }
  },
  methods: {
    handleSubmit() {
      this.$store.commit('setForm', this.form)
      this.$store.dispatch('submitForm')
    }
  }
}
</script>

这样，当我们提交表单的时候，表单数据就会存储在Vuex的状态中，并通过异步请求发送给后端接口了。