在vue2項目中，組件間相互傳值或者后臺獲取的數(shù)據(jù)需要供多個組件使用的情況很多的情況下（后臺獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù)），那么就需要用vuex來管理這些。
目前創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計、莫力達(dá)網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
整個的流程是在組件的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: '然后看下整個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'
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
}
});
一般在項目中，我們跟在交互的時候，無非是存數(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可以進(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ù)名 使用對象展開運算符將此對象混入到外部對象中
'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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
