uniapp中使用GlobalData和Vuex

灰太狼 2021-07-26 02:19 1016阅读 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 条评论，1016人围观）

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

相关阅读

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

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

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

相关 uniApp 使用vuex

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 uniapp - uniapp 中的样式使用

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

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

相关 uniapp中使用GlobalData和Vuex

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

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