vue根据url获取内容axios_vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据...
在ｖｕｅ項(xiàng)目中組件間相互傳值或者后臺(tái)獲取的數(shù)據(jù)需要供多個(gè)組件使用的情況很多的話，有必要考慮引入ｖｕｅｘ來管理這些凌亂的狀態(tài)，今天這邊博文用來記錄這一整個(gè)的過程，后臺(tái)ａｐｉ接口是使用ｗｅｂｐａｃｋ－ｓｅｒｖｅｒ模擬的接口，這個(gè)前面的文章中有提到，需要的可以去翻閱。
整個(gè)的流程是在組件的ｃｒｅａｔｅｄ中提交ｄｉｓｐａｔｃｈ，然后通過ａｃｔｉｏｎ調(diào)用一個(gè)封裝好的ａｘｉｏｓ然后再觸發(fā)ｍｕｔａｔｉｏｎ來提交狀態(tài)改變ｓｔａｔｅ中的數(shù)據(jù)，然后在組件的計(jì)算屬性中獲取ｓｔａｔｅ的數(shù)據(jù)并渲染在頁面上
首先新需要在項(xiàng)目中安裝ｖｕｅｘ：
運(yùn)行命令 ｎｐｍ ｉｎｓｔａｌｌ ｖｕｅｘ －－ｓａｖｅ－ｄｅｖ
在項(xiàng)目的入口ｊｓ文件ｍａｉｎ．ｊｓ中
import store from './store/index'
并將ｓｔｏｒｅ掛載到ｖｕｅ上newVue({
el:'#app',
router,
store,
template:'',
render: (createElement)=>createElement(App)
})
然后看下整個(gè)ｓｔｏｒｅ的目錄結(jié)構(gòu)，ｍｏｄｕｌｅｓ文件夾用來將不同功能也面的狀態(tài)分成模塊，ｉｎｄｅｘ．ｊｓ文件夾是ｓｔｏｒｅ的入口文件，ｔｙｐｅｓ文件夾是定義常量ｍｕｔａｔｉｏｎ的文件夾
整個(gè)ｖｕｅｘ的目錄結(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{//獲取我的頁面的后臺(tái)數(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
}
});
在你需要請(qǐng)求后臺(tái)數(shù)據(jù)并想使用ｖｕｅｘ的組件中的ｃｒｅａｔｅｄ分發(fā)第一個(gè)ｄｉｓｐａｔｃｈ：
created() {this.$store.dispatch('getMineBaseApi');
}
然后在ｓｔｏｒｅ／ｍｏｄｕｌｅｓ下的對(duì)應(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'])
}，
．．．
｝
然后在控制臺(tái)查看把：
ｇｅｔｔｅｒ和ｍｕｔａｔｉｏｎ都已經(jīng)成功了，同時(shí)我在提交ｓｔａｔｅ的整個(gè)過程都添加了ａｌｅｒｔ，大家可以看看整個(gè)流程是如何走的；
總結(jié)
以上是生活随笔為你收集整理的vue根据url获取内容axios_vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win7设置开机启动项的方法
- 下一篇： vue 获取元素在浏览器的位置_前端开发