这里写图片描述
我们的项目使用了Vuex,关于Vuex是什么看这里:
http://vuex.vuejs.org/zh-cn/intro.html

Vuex里有个Modules的概念:
http://vuex.vuejs.org/zh-cn/modules.html

我们前面用户登录获取access_token等信息,都是写在UsersModule.js这个module中的。
http://blog.csdn.net/github_26672553/article/details/70048077

Vuex多个module交互

我们的项目使用了Vuex,关于Vuex是什么看这里:
http://vuex.vuejs.org/zh-cn/intro.html
Vuex里有个Modules的概念:
http://vuex.vuejs.org/zh-cn/modules.html

现在假如我们有一个VideosModule.js专门用来处理我们视频模块(视频列表展示)

actions:{
  loadVideos(context,params){
    axios.get("localhost://xxxx/load-video.php?access-token").then(function(res){
      console.log(res.data);
    })
  }
}

在这个地方,我们需要给access-token赋值,需要获取保存在客户端的值了。
我们之前已经在UsersModules.js里写好了:

    state:{
        currentUser:{
            get UserName(){
                let  username = localStorage.getItem("currentUser_name");
                if (username==null || username== undefined){
                    return "guest";
                }
                return username;
            },
            get UserToken(){
                return localStorage.getItem("currentUser_token");
            }
        }
    },

通过currentUser就可以获取到。
但是现在我们是在VideosModule.js里,我们又怎么样获取该数据呢?

可以通过context.rootState.users.currentUser来获取。
users是我们在入口文件member-index.js给Vuex配置modules的名称。

其他:

一般来说不要把我们的业务代码放到modules里面,比如登录

loadVideos(context,params){
  if(content.rootStae.users.currentUser.username == "guest"){
    //去登录
    Vue.prototype.function.needLogin();
  }
}

我们加载视频的时候如果用户没有登录,就去登录页。

needLogin()函数哪来的?
fucction.js中定义的:

export default{
    getVersion(){
        return '1.0';
    },
    needLogin(){
        self.location = "users/login";
    }
}

那又为何可全局调用呢?
这个就要看vue的插件知识了:
http://cn.vuejs.org/v2/guide/plugins.html

我们这里有一个global.js就是一个插件,代码如下:

import functions from './function';
import APIConfig from './../config/APIConfig';
export  default{
    //Vue开发插件必须有的方法
    //参考文档:http://cn.vuejs.org/v2/guide/plugins.html
    install(Vue){
        Vue.prototype.functions = functions;
        Vue.prototype.APIConfig = APIConfig;
    }
}

可以看到,在install方法里设置了Vue.prototype.functions = functions
最后在入口文件中引入并使用这个插件就好了:

import global from './global'; //我们自己写的全局插件
Vue.use(global);
Logo

前往低代码交流专区

更多推荐