在uni-app中使用Vuex

悠悠 2021-07-26 19:28 453阅读 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 条评论，453人围观）

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

相关阅读

相关如何在uniapp中使用iconfont图标？

一步: 从iconfont下载icon图标 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly...

墨蓝/ 2024年04月17日 06:28/ 0 赞/ 53 阅读

相关 uniApp 使用vuex

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

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

相关 vuex在vue-cli中的使用

第一步：安装vuex资源包 `npm install vuex --save` 第二步：在src/main.js中引入（我这里是单独建立的一个store文件来放vue

喜欢ヅ旅行/ 2023年08月17日 16:00/ 0 赞/ 117 阅读

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

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

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

相关如何在uni-app中使用vuex

在uni-app中内置了vuex，我们只需要引用就行了首先在根目录下创建store目录在里面创建index.js； ![在这里插入图片描述][watermark_ty

喜欢ヅ旅行/ 2022年11月20日 09:37/ 0 赞/ 381 阅读

相关 Vuex的使用（一）——在项目中引入Vuex

参考文档：https://vuex.vuejs.org/zh/guide/ 如果当前没有项目代码，可以访问[传送门][Link 1]搭建一个，以下Vuex相关功能都是在传送门

港控/mmm°/ 2022年09月09日 06:41/ 0 赞/ 212 阅读

相关在uni-app中使用vuex

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

比眉伴天荒/ 2022年02月28日 16:36/ 0 赞/ 389 阅读

相关在vue项目中使用vuex

首先在npm中安装vuex npm install vuex --save ![clipboard.png][] 安装成功在vue项目目录下建立sto

朱雀/ 2021年07月27日 01:02/ 0 赞/ 456 阅读

相关在uni-app中使用Vuex

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

悠悠/ 2021年07月26日 19:28/ 0 赞/ 454 阅读

相关 uniapp中使用GlobalData和Vuex

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

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