补充globalData和vuex的测试例

Author: wanganxp

App.vue

@@ -43,7 +43,10 @@
         },
         onHide: function() {
             console.log('App Hide')
-        }
+        },
+		globalData: {
+			test: ''
+		}
     }
 </script>
 

pages.json

@@ -12,7 +12,7 @@
                             "text": "\ue534",
                             "fontSrc": "/static/uni.ttf",
                             "fontSize": "22px",
-                            "color": "#999999"
+                            "color": "#FFFFFF"
                         }]
                     }
                 }
@@ -28,7 +28,7 @@
                             "text": "\ue534",
                             "fontSrc": "/static/uni.ttf",
                             "fontSize": "22px",
-                            "color": "#999999"
+                            "color": "#FFFFFF"
                         }]
                     }
                 }
@@ -44,7 +44,7 @@
                             "text": "\ue534",
                             "fontSrc": "/static/uni.ttf",
                             "fontSize": "22px",
-                            "color": "#999999"
+                            "color": "#FFFFFF"
                         }]
                     }
                 }
@@ -60,7 +60,7 @@
                             "text": "\ue534",
                             "fontSrc": "/static/uni.ttf",
                             "fontSize": "22px",
-                            "color": "#999999"
+                            "color": "#FFFFFF"
                         }]
                     }
                 }
@@ -1159,14 +1159,19 @@
                         "navigationBarTitleText": "表单校验"
                     }
                 }
-
+				,{
+				    "path" : "global/global",
+				    "style" : {
+						"navigationBarTitleText": "GlobalData和vuex"
+					}
+				}
             ]
         }
     ],
     "globalStyle": {
-        "navigationBarTextStyle": "black",
+        "navigationBarTextStyle": "white",
         "navigationBarTitleText": "Hello uniapp",
-        "navigationBarBackgroundColor": "#F8F8F8",
+        "navigationBarBackgroundColor": "#007AFF",
         "backgroundColor": "#F8F8F8",
         "backgroundColorTop": "#F4F5F6",
         "backgroundColorBottom": "#F4F5F6",

pages/tabBar/template/template.nvue

@@ -154,6 +154,9 @@
                     }, {
                         name: '表单验证',
                         url: 'datachecker'
+                    }, {
+                        name: 'GlobalData和vuex',
+                        url: 'global'
                     },
                     // #ifdef APP-PLUS
                     {

pages/template/global/global.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="pa">
+		<view class="uni-divider">
+			<view class="uni-divider__content">globalData</view>
+			<view class="uni-divider__line"></view>
+		</view>
+		<text class="text">globalData中text的值: {{gd.test}}</text>
+		<button @click="setGD()" class="button">修改上述值为123</button>
+
+		<view class="uni-divider">
+			<view class="uni-divider__content">vuex</view>
+			<view class="uni-divider__line"></view>
+		</view>
+		<text class="text">vuex中hasLogin的值: {{testvuex}}</text>
+		<button @click="setVUEX(true)" class="button">修改上述值为true</button>
+		<button @click="setVUEX(false)" class="button">修改上述值为false</button>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
+	export default {
+		data() {
+			return {
+				gd:{}
+			}
+		},
+		computed: {
+			...mapState(['testvuex'])
+		},
+		methods: {
+			...mapMutations(['setTestTrue']),
+			...mapMutations(['setTestFalse']),
+			setGD:function () {
+				getApp().globalData.test="123"
+			},
+			setVUEX:function (isTrue) {
+				// console.log("this.testvuex: " + this.testvuex);
+				// this.hasLogin = true; 这样赋值不生效，必须用store/index.js里注册的mapMutations才行
+				if(isTrue){
+					this.setTestTrue(this.$store.state);
+				}
+				else{
+					this.setTestFalse(this.$store.state);
+				}
+				// console.log("this.testvuex: " + this.testvuex);
+			}
+		},
+		onShow() {
+			this.gd = getApp().globalData
+		}
+	}
+</script>
+
+<style>
+.button {
+	margin: 30rpx;
+	color: #007AFF;
+}
+.text{
+	margin-left: 30rpx;
+}
+</style>

store/index.js

@@ -7,7 +7,8 @@ const store = new Vuex.Store({
 	state: {
 		hasLogin: false,
 		loginProvider: "",
-		openid: null
+		openid: null,
+		testvuex:false
 	},
 	mutations: {
 		login(state, provider) {
@@ -20,6 +21,12 @@ const store = new Vuex.Store({
 		},
 		setOpenid(state, openid) {
 			state.openid = openid
+		},
+		setTestTrue(state){
+			state.testvuex = true
+		},
+		setTestFalse(state){
+			state.testvuex = false
 		}
 	},
 	actions: {