uni-app中使用Vuex

比眉伴天荒 2022-12-21 00:45 103阅读 0赞

在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建 index.js 定义状态值

const store = new Vuex.Store({  
        state: {  
            login: false,  
            token: '',  
            avatarUrl: '',  
            userName: ''  
        },  
        mutations: {  
            login(state, provider) {  
                console.log(state)  
                console.log(provider)  
                state.login = true;  
                state.token = provider.token;  
                state.userName = provider.userName;  
                state.avatarUrl = provider.avatarUrl;  
            },  
            logout(state) {  
                state.login = false;  
                state.token = '';  
                state.userName = '';  
                state.avatarUrl = '';  
            }  
        }  
    })

然后，需要在 main.js 挂载 Vuex

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

最后，在 pages/index/index.vue 使用

<script>  
        import {  
            mapState,  
            mapMutations  
        } from 'vuex';  
    
        export default {  
            computed: {  
                ...mapState(['avatarUrl', 'login', 'userName'])  
            },  
            methods: {  
                ...mapMutations(['logout'])  
            }  
        }  
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniApp 使用vuex

1、根目录创建store目录，创建index.js文件； import Vue from 'vue' import Vuex from 'vuex'

Myth丶恋晨/ 2023年09月23日 14:21/ 0 赞/ 136 阅读

相关 uniapp的Vuex使用

uniapp的Vuex使用一、在项目的根目录下新建一个store文件夹，然后在文件夹下新建一个index.js文件 ![在这里插入图片描述][watermark_t

阳光穿透心脏的1/2处/ 2023年07月21日 11:13/ 0 赞/ 12 阅读

相关 uniapp Vuex 状态管理模式基本使用

一、uniapp 引入定义挂载Vuex 1、在根目录下建立store目录创建index.js文件 ![创建store目录][store] 代码如下 i

绝地灬酷狼/ 2022年12月12日 13:44/ 0 赞/ 430 阅读

相关 uniapp中使用uview

一、在uview中下载文件 https://ext.dcloud.net.cn/plugin?id=1593 ![在这里插入图片描述][watermark_type_Z

不念不忘少年蓝@/ 2022年11月19日 07:49/ 0 赞/ 427 阅读

相关 uniapp中使用uview

一、在uview中下载文件 https://ext.dcloud.net.cn/plugin?id=1593 ![在这里插入图片描述][watermark_type_Z

Myth丶恋晨/ 2022年11月19日 07:44/ 0 赞/ 691 阅读

相关 vue+uniapp：vuex数据渲染到标签v-model中

将v-model改成:value [https://segmentfault.com/a/1190000018127192][https_segmentfault.com_a

旧城等待，/ 2022年11月12日 02:49/ 0 赞/ 182 阅读

相关 uniapp、vue中直接调用vuex的子模块

uniapp、vue中直接调用vuex的子模块 / 适合App.vue里面app一启动就调用该方法 @method commit @param {子模块的名

淡淡的烟草味﹌/ 2022年10月23日 08:17/ 0 赞/ 152 阅读

相关 nuxt，axios中使用Vuex【获取Vuex中的值】

> 登录的时候，需要设置一个token请求头，想在axios里面全局配置一下 > 找了半天，终于被我找到了。? 1、配置vuex [https://blog.csdn.n

冷不防/ 2021年11月22日 11:38/ 0 赞/ 705 阅读

相关 uniapp - uniapp 中的样式使用

uniapp 中的样式使用一. 尺寸单位二. 样式导入三. 内联样式四. 选择器五. 全局样式与局部样式 > 在 uni-app

╰+哭是因爲堅強的太久メ/ 2021年07月26日 02:42/ 0 赞/ 926 阅读

相关 uniapp中使用GlobalData和Vuex

效果图： ![20210307001752757.gif][] 实现代码： <template> <view> globalData

灰太狼/ 2021年07月26日 02:19/ 0 赞/ 1047 阅读