vue根据url获取内容axios_vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据...
在ｖｕｅ項目中組件間相互傳值或者后臺獲取的數據需要供多個組件使用的情況很多的話，有必要考慮引入ｖｕｅｘ來管理這些凌亂的狀態，今天這邊博文用來記錄這一整個的過程，后臺ａｐｉ接口是使用ｗｅｂｐａｃｋ－ｓｅｒｖｅｒ模擬的接口，這個前面的文章中有提到，需要的可以去翻閱。
整個的流程是在組件的ｃｒｅａｔｅｄ中提交ｄｉｓｐａｔｃｈ，然后通過ａｃｔｉｏｎ調用一個封裝好的ａｘｉｏｓ然后再觸發ｍｕｔａｔｉｏｎ來提交狀態改變ｓｔａｔｅ中的數據，然后在組件的計算屬性中獲取ｓｔａｔｅ的數據并渲染在頁面上
首先新需要在項目中安裝ｖｕｅｘ：
運行命令 ｎｐｍ ｉｎｓｔａｌｌ ｖｕｅｘ －－ｓａｖｅ－ｄｅｖ
在項目的入口ｊｓ文件ｍａｉｎ．ｊｓ中
import store from './store/index'
并將ｓｔｏｒｅ掛載到ｖｕｅ上newVue({
el:'#app',
router,
store,
template:'',
render: (createElement)=>createElement(App)
})
然后看下整個ｓｔｏｒｅ的目錄結構，ｍｏｄｕｌｅｓ文件夾用來將不同功能也面的狀態分成模塊，ｉｎｄｅｘ．ｊｓ文件夾是ｓｔｏｒｅ的入口文件，ｔｙｐｅｓ文件夾是定義常量ｍｕｔａｔｉｏｎ的文件夾
整個ｖｕｅｘ的目錄結構如下：
這里我新建了文件夾ｆｅｔｃｈ用來編寫所有的ａｘｉｏｓ處理和ａｘｉｏｓ封裝
在ｆｅｔｃｈ文件夾下新建ａｐｉ．ｊｓ文件：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{//獲取我的頁面的后臺數據mineBaseMsgApi() {
alert('進入api.js')returnfetch('/api/getBoardList');
}
}
在ｓｔｏｒｅ的入口文件ｉｎｄｅｘ．ｊｓ中：import Vuefrom'vue'import Vuexfrom'vuex'import minefrom'./modules/mine';
Vue.use(Vuex);
exportdefaultnewVuex.Store({
modules: {
mine
}
});
在你需要請求后臺數據并想使用ｖｕｅｘ的組件中的ｃｒｅａｔｅｄ分發第一個ｄｉｓｐａｔｃｈ：
created() {this.$store.dispatch('getMineBaseApi');
}
然后在ｓｔｏｒｅ／ｍｏｄｕｌｅｓ下的對應模塊ｊｓ文件中，這里我使用的ｍｉｎｅ．ｊｓ文件中編寫ｓｔａｔｅ、ａｃｔｉｏｎ和ｍｕｔａｔｉｏｎimport apifrom'./../../fetch/api';
import*astypesfrom'./../types.js';conststate ={
getMineBaseMsg: {
errno:1,
msg: {}
}
}constactions ={
getMineBaseApi({commit}) {
alert('進入action');
api.mineBaseMsgApi()
.then(res=>{
alert('action中調用封裝后的axios成功');
console.log('action中調用封裝后的axios成功')
commit(types.GET_BASE_API, res)
})
}
}constgetters ={
getMineBaseMsg: state=>state.getMineBaseMsg
}constmutations ={
[types.GET_BASE_API](state, res) {
alert('進入mutation');
state.getMineBaseMsg={ ...state.getMineBaseMsg, msg: res.data.msg }
alert('進入mutations修改state成功');
}
}
exportdefault{
state,
actions,
getters,
mutations
}
然后在想取回ｓｔａｔｅ的組件中使用ｍａｐＧｅｔｔｅｒｓ獲取ｓｔａｔｅ：import { mapGetters }from'vuex';
exportdefault{
．．．
computed: {
...mapGetters(['getMineBaseMsg'])
}，
．．．
｝
然后在控制臺查看把：
ｇｅｔｔｅｒ和ｍｕｔａｔｉｏｎ都已經成功了，同時我在提交ｓｔａｔｅ的整個過程都添加了ａｌｅｒｔ，大家可以看看整個流程是如何走的；
總結
以上是生活随笔為你收集整理的vue根据url获取内容axios_vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win7设置开机启动项的方法
- 下一篇： 机器人J中WPR_北方工业大学服务机器人