在vue2項目中，組件間相互傳值或者后臺獲取的數據需要供多個組件使用的情況很多的情況下（后臺獲取數據存入vuex，組件之間共享數據），那么就需要用vuex來管理這些。
整個的流程是在組件的created中提交dispatch，然后通過action調用一個封裝好的axios，然后再觸發mutation來提交狀態改變state中的數據，然后在組件的計算屬性中獲取state的數據并渲染在頁面上
首先新需要在項目中安裝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的目錄結構，modules文件夾用來將不同功能也面的狀態分成模塊，index.js文件夾是store的入口文件，types文件夾是定義常量mutation的。文件夾整個vuex的目錄結構如下：
這里我新建了文件夾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 { // 獲取我的頁面的后臺數據 mineBaseMsgApi() { // alert('進入api.js') return fetch('/api/getBoardList'); }, commonApi(url, params) { return fetch(url, params) } }在store的入口文件index.js中：
// 組裝模塊并導出 store 的文件 import Vue from 'vue' import Vuex from 'vuex' import mine from './modules/mine'; import club from './modules/club'; Vue.use(Vuex); // 導出需要的模塊 export default new Vuex.Store({ modules: { club, mine } });一般在項目中，我們跟在交互的時候，無非是存數據和取數據。首先我們來看存數據：
1：在你需要請求后臺數據并想使用vuex的組件中的created分發第一個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('調用封裝后的axios成功'); }) },2：然后在store/modules下的對應模塊js文件中，這里我使用的club.js文件中編寫state、action和mutation（一般為了方便，我們會習慣的把action里面的名字以駝峰式命名，而mutation里面的命名，我們會采用全大寫+下劃線的命名方式）actions 用來觸發mutations，action可以進行異步操作 ，在action里可以用commit提交mutations
const actions = { // 保存ID storeMovieID為上面的"action名" storeMovieID({ commit }, res) { //此處是觸發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中的數據：
//mutation名常量定義 并且需要在type.js文件下定義常量const mutations = { // 修改ID 中括號代表常量 [types.常量名] [types.STORE_MOVIE_ID]( state, res) { state.movieID = res; //state.數據名 = data },}5：定義state數據：（數據名：初始值）
const state = { //采用 數據名：初始值的格式 contextPathSrc: '后臺接口公共部分', movieID: '',}最后所有的club.js完整內容如下：(當然getters是在取數據的時候用的，下面會講)
import api from './../../fetch/api';import * as types from './../types.js';// state 是vuex 保存數據的，就相當于vue里的dataconst state = { contextPathSrc: '后臺接口公共部分', movieID: '',}const actions = { // 保存ID storeMovieID為上面的"action名" storeMovieID({ commit }, res) { //此處是觸發mutation的 STORE_MOVIE_ID為"mutation名" commit(types.STORE_MOVIE_ID, res); },}const getters = { // 圖片公共 src 的獲取 getter函數：state=> state.數據名 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提交數據的，只能進行同步操作const mutations = { // 修改ID 中括號代表常量 我們可使用ES2015風格的計算屬性命名功能來使用一個常量[types.STORE_MOVIE_ID]作為函數名 [types.STORE_MOVIE_ID]( state, res) { state.movieID = res; },}export default { state, actions, getters, mutations}下邊我們要說的是取數據并且渲染到頁面中，或者在頁面函數中使用的方法：
1：組建中你需要導入如下：
import { mapGetters } from 'vuex';在組件的計算屬性中，如下：
computed: { ...mapGetters([//...函數名 使用對象展開運算符將此對象混入到外部對象中 'getContextPathSrc' ]) },這里的getContextPathSrc函數，在頁面中可直接使用，如果在函數中使用，需要this.getContextPathSrc
2：最后在store中寫getters函數：
const getters = { // 圖片公共 src 的獲取 getter函數：state=> state.數據名 getContextPathSrc: state => state.contextPathSrc, }最后在頁面渲染就可以了。。這樣就完成了交互?？赡苡腥藭粢獾缴厦娴膅etters里的movieID函數有個if判斷，最后
return localStorage.getItem('STORE_MOVIE_ID')有人會好奇為啥用localStorage……這個我們也不想用，只是如果你的頁面如果用戶強制刷新一下的話，會有個很奇怪的事發生，就是數據全部取不到，后來是沒辦法才加的。
最后，希望這些講解，對于初學者來說有幫助……別被vuex的官網整的云里霧里（ps：我初學時也云里霧里整不明白偷笑）。好了，下班啦，更多的內容，會慢慢跟大家分享。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
