• 技术文章 >web前端 >uni-app

    如何在uni-app使用vuex

    青灯夜游青灯夜游2021-09-15 15:33:00原创75

    方法:1、项目根目录下新建store目录,该目录里创建“index.js”文件;2、“index.js”下引入vue和vuex;3、“main.js”中挂载Vuex;4、在“pages/index/index.vue”中使用vuex即可。

    本教程操作环境:windows7系统、vue2.9.6&&uni-app2.5.1版,DELL G3电脑。

    uni-app中使用vuex的方法:

    在uni-app中内置了vuex,我们只需要引用就行了

    1、在 uni-app 项目根目录下新建 store 目录,在 store 目录下创建 index.js

    1.png

    2、新建的index.js下引入vue和vuex,具体如下:

    //引入vue和vuex
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({//全局变量定义
        state: {
            forcedLogin: false,//是否需要强制登录
            hasLogin: false,
            userName: "",
            userId:'',
            token:'',
            pointId:'',
        },
        mutations: {
            login(state, user) {
                state.userName = user.username || '';
                state.hasLogin = true;
                state.userId = user.id || '';
                state.token = user.token || '';
                state.pointId = user.pointId || '';
            },
            logout(state) {
               state.userName = "";
               state.hasLogin = false;
               state.userId = '';
               state.token = '';
               state.pointId = '';
            }
        }
    })
    export default store

    3、需要在 main.js 挂载 Vuex

    import store from './store'  
    Vue.prototype.$store = store

    想要定义的这个 js 文件中的变量和方法能在各个页面使用并生效,需要先在项目目录下的 main.js 文件中导入这个 js 文件并声明方法,如下图所示:

    2.png

    4、在 pages/index/index.vue 使用

    3.png

    登陆页面

    扩展

    在vue文件中使用 取值,比如其中的token,可以使用‘this.$store.state.token’这样来取。

    在js文件中使用

    1、import store from '../../store' 先引用

    2、store.state.token 取值

    更多编程相关知识,请访问:编程视频!!

    以上就是如何在uni-app使用vuex的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:uni-app vuex
    上一篇:uni-app怎么引入插件 下一篇:详解uniapp项目中如何引入axios
    线上培训班

    相关文章推荐

    • Vue.js状态管理模式Vuex的安装与使用(代码示例)• 在Vuex中Mutations修改状态操作下详解• 浅析uni-app中设置导航栏和修改默认端口的方法• 解决uni-app入坑集合的一种方案(分享)• 浅谈uni-app项目怎么监听触摸和滑动事件

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网