詳細(xì)講解vue2+vuex+axios

發(fā)布時間：2020-10-20 13:01:06 來源：腳本之家閱讀：197 作者：趙海辛欄目：web開發(fā)

在vue2項目中，組件間相互傳值或者后臺獲取的數(shù)據(jù)需要供多個組件使用的情況很多的情況下（后臺獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù)），那么就需要用vuex來管理這些。

整個的流程是在組件的created中提交dispatch，然后通過action調(diào)用一個封裝好的axios，然后再觸發(fā)mutation來提交狀態(tài)改變state中的數(shù)據(jù)，然后在組件的計算屬性中獲取state的數(shù)據(jù)并渲染在頁面上

首先新需要在項目中安裝vuex：

運行命令：npm install vuex --save-dev

在項目的入口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)如下：

詳細(xì)講解vue2+vuex+axios

這里我新建了文件夾fetch用來編寫所有的axios處理（這里是把axios封裝了）并且在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('進入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
  }
 });

一般在項目中，我們跟在交互的時候，無非是存數(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í)慣的把action里面的名字以駝峰式命名，而mutation里面的命名，我們會采用全大寫+下劃線的命名方式）actions 用來觸發(fā)mutations，action可以進行異步操作，在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ù)的，只能進行同步操作
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ù)名 使用對象展開運算符將此對象混入到外部對象中
  '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……這個我們也不想用，只是如果你的頁面如果用戶強制刷新一下的話，會有個很奇怪的事發(fā)生，就是數(shù)據(jù)全部取不到，后來是沒辦法才加的。

最后，希望這些講解，對于初學(xué)者來說有幫助……別被vuex的官網(wǎng)整的云里霧里（ps：我初學(xué)時也云里霧里整不明白偷笑）。好了，下班啦，更多的內(nèi)容，會慢慢跟大家分享。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

詳細(xì)講解vue2+vuex+axios

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽