使用vuex和axios获取api数据

前端精髓

共 1881字,需浏览 4分钟

 · 2021-04-26


使用vuex,我们可以轻松管理状态。因为如果您的组件需要共享和更新状态,那么就需要它。在本篇文章中,我将为您提供完整的vuex设置,其中包括带有axios调用api获取数据的示例。


因此,让我们开始我们的vuex教程。现在,通过在终端中运行以下代码来创建Vue项目:

vue create vuex-app


现在我们必须安装vuex和axios。所以打开终端并一个接一个地运行两个命令。

npm install vuex
//then
npm install axios


在您的 store 文件夹中,创建一个文件并命名 index.js 。

├── index.html└── src    ├── components    ├── App.vue    └──store       └── index.js


接下来,在 store/index.js 文件中输入以下代码:

import axios from 'axios'import Vuex from 'vuex'import Vue from 'vue'
//load VuexVue.use(Vuex);
//to handle stateconst state = { posts: []}
//to handle stateconst getters = {
}
//to handle actionsconst actions = { getPosts({ commit }) { axios.get('https://jsonplaceholder.typicode.com/posts') .then(response => { commit('SET_POSTS', response.data) }) }}
//to handle mutationsconst mutations = { SET_POSTS(state, posts) { state.posts = posts }}
//export store moduleexport default new Vuex.Store({ state, getters, actions, mutations})


现在,我们必须在您的main.js文件中注册我们的store :

import Vue from 'vue'import App from './App.vue'import store from './store'
Vue.config.productionTip = false
new Vue({ store, render: h => h(App),}).$mount('#app')


现在打开您的主App.vue文件,输入以下代码:

<template>  <div id="app">    <h1>{{ msg }}</h1>    <div>      <ul v-for='post in posts' :key='post.id'>        <li>Post Title: {{post.title}}</li>      </ul>    </div>  </div></template>
<script>import { mapGetters } from 'vuex';
export default { name: 'App', data () { return { msg: 'We are learning vuex!!' } }, computed: { computed: mapGetters(['allPosts']), }, mounted() { this.$store.dispatch("getPosts"); }}</script>


这就是使用Axios Api调用的Vuex完整指南示例。


浏览 30
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报