网站开发小工具,网站做好了怎么和域名,报电子商务(网站建设与运营),自己注册公司有什么弊端在#xff56;#xff55;#xff45;项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话#xff0c;有必要考虑引入#xff56;#xff55;#xff45;#xff58;来管理这些凌乱的状态#xff0c;今天这边博文用来记录这一整个的过程#xf…在项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话有必要考虑引入来管理这些凌乱的状态今天这边博文用来记录这一整个的过程后台接口是使用模拟的接口这个前面的文章中有提到需要的可以去翻阅。整个的流程是在组件的中提交然后通过调用一个封装好的然后再触发来提交状态改变中的数据然后在组件的计算属性中获取的数据并渲染在页面上首先新需要在项目中安装运行命令 在项目的入口文件中import store from ./store/index并将挂载到上newVue({el:#app,router,store,template:,render: (createElement)createElement(App)})然后看下整个的目录结构文件夹用来将不同功能也面的状态分成模块文件夹是的入口文件文件夹是定义常量的文件夹整个的目录结构如下这里我新建了文件夹用来编写所有的处理和封装在文件夹下新建文件import axiosfromaxiosexport 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 Vuefromvueimport Vuexfromvueximport 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: statestate.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 }fromvuex;exportdefault{computed: {...mapGetters([getMineBaseMsg])}然后在控制台查看把和都已经成功了同时我在提交的整个过程都添加了大家可以看看整个流程是如何走的