詳細(xì)講解vue2+vuex+axios
在vue2項(xiàng)目中，組件間相互傳值或者后臺獲取的數(shù)據(jù)需要供多個組件使用的情況很多的情況下（后臺獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù)），那么就需要用vuex來管理這些。
整個的流程是在組件的created中提交dispatch，然后通過action調(diào)用一個封裝好的axios，然后再觸發(fā)mutation來提交狀態(tài)改變state中的數(shù)據(jù)，然后在組件的計算屬性中獲取state的數(shù)據(jù)并渲染在頁面上
首先新需要在項(xiàng)目中安裝vuex：
運(yùn)行命令：npm install vuex --save-dev
在項(xiàng)目的入口js文件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處理（這里是把a(bǔ)xios封裝了）并且在fetch文件夾下新建api.js文件：
import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.baseURL = '后臺接口公共前綴';
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
})
.catch((error) => {
reject(error);
})
})
}
export default {
// 獲取我的頁面的后臺數(shù)據(jù)
mineBaseMsgApi() {
// alert('進(jìn)入api.js')
return fetch('/api/getBoardList');
},
commonApi(url, params) {
return fetch(url, params)
}
}
在store的入口文件index.js中：
// 組裝模塊并導(dǎo)出 store 的文件
import Vue from 'vue'
import Vuex from 'vuex'
import mine from './modules/mine';
import club from './modules/club';
Vue.use(Vuex);
// 導(dǎo)出需要的模塊
export default new Vuex.Store({
modules: {
club,
mine
}
});
一般在項(xiàng)目中，我們跟在交互的時候，無非是存數(shù)據(jù)和取數(shù)據(jù)。首先我們來看存數(shù)據(jù)：
1：在你需要請求后臺數(shù)據(jù)并想使用vuex的組件中的created分發(fā)第一個dispatch：
created() {
// 保存ID到vuex，在購買頁面使用
this.$store.dispatch('storeMovieID',this.$route.params.ID)——（“action名”，data）;
api.commonApi('url','params')
.then(res => {
this.backMsg = res.data;
console.log(this.backMsg);
console.log('調(diào)用封裝后的axios成功');
})
},
2：然后在store/modules下的對應(yīng)模塊js文件中，這里我使用的club.js文件中編寫state、action和mutation（一般為了方便，我們會習(xí)慣的把a(bǔ)ction里面的名字以駝峰式命名，而mutation里面的命名，我們會采用全大寫+下劃線的命名方式）actions 用來觸發(fā)mutations，action可以進(jìn)行異步操作 ，在action里可以用commit提交mutations
const actions = {
// 保存ID storeMovieID為上面的"action名"
storeMovieID({ commit }, res) {
//此處是觸發(fā)mutation的 STORE_MOVIE_ID為"mutation名"
commit(types.STORE_MOVIE_ID, res);
},
}
3：我們需要在type.js里面定義常量：
// ID 變量名（大寫）=‘常量名（大寫）' export const STORE_MOVIE_ID = 'STORE_MOVIE_ID';
4：通過mutation修改state中的數(shù)據(jù)：
//mutation名常量定義 并且需要在type.js文件下定義常量
const mutations = {
// 修改ID 中括號代表常量 [types.常量名]
[types.STORE_MOVIE_ID]( state, res) {
state.movieID = res; //state.數(shù)據(jù)名 = data
},
}
5：定義state數(shù)據(jù)：（數(shù)據(jù)名：初始值）
const state = { //采用 數(shù)據(jù)名：初始值的格式
contextPathSrc: '后臺接口公共部分',
movieID: '',
}
最后所有的club.js完整內(nèi)容如下：(當(dāng)然getters是在取數(shù)據(jù)的時候用的，下面會講)
import api from './../../fetch/api';
import * as types from './../types.js';
// state 是vuex 保存數(shù)據(jù)的，就相當(dāng)于vue里的data
const state = {
contextPathSrc: '后臺接口公共部分',
movieID: '',
}
const actions = {
// 保存ID storeMovieID為上面的"action名"
storeMovieID({ commit }, res) {
//此處是觸發(fā)mutation的 STORE_MOVIE_ID為"mutation名"
commit(types.STORE_MOVIE_ID, res);
},
}
const getters = {
// 圖片公共 src 的獲取 getter函數(shù)：state=> state.數(shù)據(jù)名
getContextPathSrc: state => state.contextPathSrc,
// 獲取ID
movieID: state => {
if(state.movieID == ''){
return localStorage.getItem('STORE_MOVIE_ID');
}else{
return state.movieID;
}
},
}
//mutation名常量定義 并且需要在type.js文件下定義常量 mutations 用來向state提交數(shù)據(jù)的，只能進(jìn)行同步操作
const mutations = {
// 修改ID 中括號代表常量 我們可使用ES2015風(fēng)格的計算屬性命名功能來使用一個常量[types.STORE_MOVIE_ID]作為函數(shù)名
[types.STORE_MOVIE_ID]( state, res) {
state.movieID = res;
},
}
export default {
state,
actions,
getters,
mutations
}
下邊我們要說的是取數(shù)據(jù)并且渲染到頁面中，或者在頁面函數(shù)中使用的方法：
1：組建中你需要導(dǎo)入如下：
import { mapGetters } from 'vuex';
在組件的計算屬性中，如下：
computed: {
...mapGetters([//...函數(shù)名 使用對象展開運(yùn)算符將此對象混入到外部對象中
'getContextPathSrc'
])
},
這里的getContextPathSrc函數(shù)，在頁面中可直接使用，如果在函數(shù)中使用，需要this.getContextPathSrc
2：最后在store中寫getters函數(shù)：
const getters = {
// 圖片公共 src 的獲取 getter函數(shù)：state=> state.數(shù)據(jù)名
getContextPathSrc: state => state.contextPathSrc,
}
最后在頁面渲染就可以了。。這樣就完成了交互?？赡苡腥藭粢獾缴厦娴膅etters里的movieID函數(shù)有個if判斷，最后
return localStorage.getItem('STORE_MOVIE_ID')
有人會好奇為啥用localStorage……這個我們也不想用，只是如果你的頁面如果用戶強(qiáng)制刷新一下的話，會有個很奇怪的事發(fā)生，就是數(shù)據(jù)全部取不到，后來是沒辦法才加的。
最后，希望這些講解，對于初學(xué)者來說有幫助……別被vuex的官網(wǎng)整的云里霧里（ps：我初學(xué)時也云里霧里整不明白偷笑）。好了，下班啦，更多的內(nèi)容，會慢慢跟大家分享。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何啟動node.js文件的3個方法,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue2項(xiàng)目中全局封裝axios問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vuex實(shí)現(xiàn)的簡單購物車功能,結(jié)合實(shí)例形式分析了vuex購物車組件相關(guān)商品列表、購物車創(chuàng)建、添加、刪除、清空等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
Vue開發(fā)中出現(xiàn)Loading?Chunk?Failed的問題解決
本文主要介紹了Vue開發(fā)中出現(xiàn)Loading?Chunk?Failed的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue中出現(xiàn)首屏白屏的六種解決方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考一下2025-02-02
這篇文章主要介紹了詳解vue簡單的store，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
在Vue3 中,v-model是用于創(chuàng)建雙向數(shù)據(jù)綁定的指令,通常,我們使用該指令將任何 HTML 表單元素與一個變量綁定以收集輸入值,本文給大家介紹Vue3.js自定義組件 v-model,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue項(xiàng)目中使用scss的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Ant?Design?of?Vue的樹形控件Tree的使用及說明
這篇文章主要介紹了Ant?Design?of?Vue的樹形控件Tree的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了React之input動態(tài)取值和賦值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05