vue+vuex+axio從后臺獲取數(shù)據(jù)存入vuex實(shí)現(xiàn)組件之間共享數(shù)據(jù)
在vue項(xiàng)目中組件間相互傳值或者后臺獲取的數(shù)據(jù)需要供多個組件使用的情況很多的話，有必要考慮引入vuex來管理這些凌亂的狀態(tài)，今天這邊博文用來記錄這一整個的過程，后臺api接口是使用webpack－server模擬的接口，這個前面的文章中有提到，需要的可以去翻閱。
整個的流程是在組件的created中提交dispatch，然后通過action調(diào)用一個封裝好的axios然后再觸發(fā)mutation來提交狀態(tài)改變state中的數(shù)據(jù)，然后在組件的計(jì)算屬性中獲取state的數(shù)據(jù)并渲染在頁面上
首先新需要在項(xiàng)目中安裝vuex：
運(yùn)行命令
npm install vuex --save-dev
在項(xiàng)目的入口is文件main.js中
import store from './store/index'
并將store掛載到vue上
new Vue({
el: '#app',
router,
store,
template: '<App/>',
render: (createElement) => createElement(App)
})然后看下整個store的目錄結(jié)構(gòu)，modules文件夾用來將不同功能也面的狀態(tài)分成模塊，index.js文件夾是store的入口文件，types文件夾是定義常量mutation的文件夾
整個vuex的目錄結(jié)構(gòu)如下：
這里我新建了文件夾fetch用來編寫所有的axios處理和axios封裝
在fetch文件夾下新建api.js文件：
import axios from 'axios'
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
alert('Api--ok');
resolve(response.data);
})
.catch((error) => {
console.log(error)
reject(error)
})
})
}
export default {
// 獲取我的頁面的后臺數(shù)據(jù)
mineBaseMsgApi() {
alert('進(jìn)入api.js')
return fetch('/api/getBoardList');
}
}
在store的入口文件index.js中：
import Vue from 'vue'
import Vuex from 'vuex'
import mine from './modules/mine';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
mine
}
});
在你需要請求后臺數(shù)據(jù)并想使用vuex的組件中的created分發(fā)第一個dispatch：
created() {
this.$store.dispatch('getMineBaseApi');
}然后在store／modules下的對應(yīng)模塊js文件中，這里我使用的mine．js文件中編寫state、action和mutation
import api from './../../fetch/api';
import * as types from './../types.js';
const state = {
getMineBaseMsg: {
errno: 1,
msg: {}
}
}
const actions = {
getMineBaseApi({commit}) {
alert('進(jìn)入action');
api.mineBaseMsgApi()
.then(res => {
alert('action中調(diào)用封裝后的axios成功');
console.log('action中調(diào)用封裝后的axios成功')
commit(types.GET_BASE_API, res)
})
}
}
const getters = {
getMineBaseMsg: state => state.getMineBaseMsg
}
const mutations = {
[types.GET_BASE_API](state, res) {
alert('進(jìn)入mutation');
state.getMineBaseMsg = { ...state.getMineBaseMsg, msg: res.data.msg }
alert('進(jìn)入mutations修改state成功');
}
}
export default {
state,
actions,
getters,
mutations
}
然后在想取回state的組件中使用mapgetters獲取state：
import { mapGetters } from 'vuex';
export default {
．．．
computed: {
...mapGetters([
'getMineBaseMsg'
])
}，
．．．
｝
然后在控制臺查看把：
getter和mutation都已經(jīng)成功了，同時我在提交state的整個過程都添加了alert，大家可以看看整個流程是如何走的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何解決this.refs拿取v-for下元素undefine問題
這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中用watch一次監(jiān)聽多個值變化的示例詳解
在Vue中,watch 本身不能監(jiān)聽多個變量,但我們可以通過返回具有計(jì)算屬性的對象然后監(jiān)聽該對象,從而實(shí)現(xiàn)一次性“監(jiān)聽多個變量”,本文給大家介紹了Vue中用watch一次監(jiān)聽兩個值變化的示例,需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Vue.prototype全局變量的實(shí)現(xiàn)示例
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
Vue?cli3.0創(chuàng)建Vue項(xiàng)目的簡單過程記錄
Vue CLI是一個基于Vue.js進(jìn)行快速開發(fā)的完整系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue?cli3.0創(chuàng)建Vue項(xiàng)目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。首先需要知道：axios不是一種新的技術(shù)。axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質(zhì)上也是對原生XHR的封裝，只不過它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范2022-09-09
這篇文章主要介紹了如何在vue中使用HTML 5 拖放API，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家介紹了如何利用Vue3制作簡單的消消樂游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動手試一試2022-05-05
jeecgboot-vue3查詢區(qū)label文字居左實(shí)現(xiàn)過程解析
這篇文章主要為大家介紹了jeecgboot-vue3查詢區(qū)label文字居左實(shí)現(xiàn)過程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-08-08
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)圖片輪播效果，vue如何實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12