在ｖｕｅ項目中組件間相互傳值或者后臺獲取的數(shù)據(jù)需要供多個組件使用的情況很多的話，有必要考慮引入ｖｕｅｘ來管理這些凌亂的狀態(tài)，今天這邊博文用來記錄這一整個的過程，后臺ａｐｉ接口是使用ｗｅｂｐａｃｋ－ｓｅｒｖｅｒ模擬的接口，這個前面的文章中有提到，需要的可以去翻閱。
整個的流程是在組件的ｃｒｅａｔｅｄ中提交ｄｉｓｐａｔｃｈ，然后通過ａｃｔｉｏｎ調(diào)用一個封裝好的ａｘｉｏｓ然后再觸發(fā)ｍｕｔａｔｉｏｎ來提交狀態(tài)改變ｓｔａｔｅ中的數(shù)據(jù)，然后在組件的計算屬性中獲取ｓｔａｔｅ的數(shù)據(jù)并渲染在頁面上
首先新需要在項目中安裝ｖｕｅｘ：
運(yùn)行命令 ｎｐｍ ｉｎｓｔａｌｌ ｖｕｅｘ －－ｓａｖｅ－ｄｅｖ
在項目的入口ｊｓ文件ｍａｉｎ．ｊｓ中
import store from './store/index'
并將ｓｔｏｒｅ掛載到ｖｕｅ上
newVue({
el:'#app',
router,
store,
template:'',
render: (createElement)=>createElement(App)
})
然后看下整個ｓｔｏｒｅ的目錄結(jié)構(gòu)，ｍｏｄｕｌｅｓ文件夾用來將不同功能也面的狀態(tài)分成模塊，ｉｎｄｅｘ．ｊｓ文件夾是ｓｔｏｒｅ的入口文件，ｔｙｐｅｓ文件夾是定義常量ｍｕｔａｔｉｏｎ的文件夾
整個ｖｕｅｘ的目錄結(jié)構(gòu)如下：
這里我新建了文件夾ｆｅｔｃｈ用來編寫所有的ａｘｉｏｓ處理和ａｘｉｏｓ封裝
在ｆｅｔｃｈ文件夾下新建ａｐｉ．ｊｓ文件：
import axiosfrom'axios'export function fetch(url,params) {returnnewPromise((resolve, reject) =>{
axios.post(url,params)
.then(response=>{
alert('Api--ok');
resolve(response.data);
})
.catch((error) =>{
console.log(error)
reject(error)
})
})
}
exportdefault{//獲取我的頁面的后臺數(shù)據(jù)mineBaseMsgApi() {
alert('進(jìn)入api.js')returnfetch('/api/getBoardList');
}
}
在ｓｔｏｒｅ的入口文件ｉｎｄｅｘ．ｊｓ中：
import Vuefrom'vue'import Vuexfrom'vuex'import minefrom'./modules/mine';
Vue.use(Vuex);
exportdefaultnewVuex.Store({
modules: {
mine
}
});
在你需要請求后臺數(shù)據(jù)并想使用ｖｕｅｘ的組件中的ｃｒｅａｔｅｄ分發(fā)第一個ｄｉｓｐａｔｃｈ：
created() {this.$store.dispatch('getMineBaseApi');
}
然后在ｓｔｏｒｅ／ｍｏｄｕｌｅｓ下的對應(yīng)模塊ｊｓ文件中，這里我使用的ｍｉｎｅ．ｊｓ文件中編寫ｓｔａｔｅ、ａｃｔｉｏｎ和ｍｕｔａｔｉｏｎ
import apifrom'./../../fetch/api';
import*astypesfrom'./../types.js';conststate ={
getMineBaseMsg: {
errno:1,
msg: {}
}
}constactions ={
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)
})
}
}constgetters ={
getMineBaseMsg: state=>state.getMineBaseMsg
}constmutations ={
[types.GET_BASE_API](state, res) {
alert('進(jìn)入mutation');
state.getMineBaseMsg={ ...state.getMineBaseMsg, msg: res.data.msg }
alert('進(jìn)入mutations修改state成功');
}
}
exportdefault{
state,
actions,
getters,
mutations
}
然后在想取回ｓｔａｔｅ的組件中使用ｍａｐＧｅｔｔｅｒｓ獲取ｓｔａｔｅ：
import { mapGetters }from'vuex';
exportdefault{
．．．
computed: {
...mapGetters(['getMineBaseMsg'])
}，
．．．
｝
然后在控制臺查看把：
ｇｅｔｔｅｒ和ｍｕｔａｔｉｏｎ都已經(jīng)成功了，同時我在提交ｓｔａｔｅ的整個過程都添加了ａｌｅｒｔ，大家可以看看整個流程是如何走的；
