uniapp中使用GlobalData和Vuex

灰太狼 2021-07-26 02:19 1047阅读 0赞

## 效果图： ##

![20210307001752757.gif][]

## 实现代码： ##

<template>
    	<view>
    		globalData中text的值: {
       { gd.test }}
    		<button type="primary" @click="setGD()">修改上述值为123</button>
    		vuex中hasLogin的值: {
       { testvuex }}
    		<button @click="setVUEX(true)">修改上述值为true</button>
    		<button @click="setVUEX(false)">修改上述值为false</button>
    	</view>
    </template>
    
    <script>
    import { mapState, mapMutations } from 'vuex';
    export default {
    	data() {
    		return {
    			gd: {}
    		};
    	},
    	computed: {
    		...mapState(['testvuex'])
    	},
    	methods: {
    		...mapMutations(['setTestTrue', 'setTestFalse']),
    		setGD: function() {
    			getApp().globalData.test = '123';
    		},
    		setVUEX: function(isTrue) {
    			if (isTrue) {
    				this.setTestTrue(this.$store.state);
    			} else {
    				this.setTestFalse(this.$store.state);
    			}
    		}
    	},
    	onShow() {
    		this.gd = getApp().globalData;
    	}
    };
    </script>

其中，store/index.js内容如下：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
    	state: {
    		testvuex: false
    	},
    	mutations: {
    		setTestTrue(state) {
    			state.testvuex = true
    		},
    		setTestFalse(state) {
    			state.testvuex = false
    		}
    	}
    })
    
    export default store

[20210307001752757.gif]: /images/20210725/a28dedcfe1564a11987588de06b419a5.png

发表评论取消回复

表情：

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

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

相关阅读

相关 VueX使用备忘(含Vuex实例和Vuex模块化)

文章目录 VueX使用备忘 1. Vuex 介绍 2. Vuex 插件的安装 3. Vuex环境的搭建

水深无声/ 2024年03月30日 15:52/ 0 赞/ 99 阅读

相关 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 赞/ 431 阅读

相关小程序和uniapp的globalData以及getApp()

globalData [uniapp的globalData][uniapp_globalData] 小程序有globalData，这是一种简单的全局变量机制。这套机制在

蔚落/ 2022年11月19日 04:25/ 0 赞/ 591 阅读

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

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

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

相关在uniapp中监听globalData中的值变化

小程序里怎么去监听app.js里的globalData数据变化呢 1、先再app.vue 中定义一个全局数据对象globalData，再对象里定义好相应的属性与属性值

末蓝、/ 2022年09月04日 04:51/ 0 赞/ 982 阅读

相关 uni-app 全局变量globalData的使用

1：在App.vue中要这样使用，let \_this = this 在内部函数onShow，onLaunch等生命周期函数中要这样： wx.getSto

淡淡的烟草味﹌/ 2021年10月19日 04:14/ 0 赞/ 999 阅读

相关 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 赞/ 1048 阅读