vuex demo

src/pages/vuex/index.vue

@@ -4,43 +4,61 @@
       <div class="page__title">页面通讯管理</div>
       <div class="page__desc">利用 vuex 实现数据的整理</div>
     </div>
-    <div class="page__bd">
-      <button type="primary" @click="turnToVuexPage">点击跳转</button>
+    <div class="page__bd page__bd_spacing">
+      <button class="weui-btn mini-btn" type="primary" size="mini" @click="getMpvueInfo">点击显示 state => mpvueInfo</button>
+      <button class="weui-btn mini-btn" type="warn" size="mini" @click="commitMpvueInfo">点击修改 state => mpvueInfo</button>
+      <div class="mpvueInfo-desc" v-show="showMpvueInfo">{{mpvueInfo}}</div>
+      <button type="primary" class="mt-15" @click="turnToVuexPage">点击跳转</button>
     </div>
   </div>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex';
 export default {
+  data() {
+    return {
+      stateMpvueInfo: '',
+      showMpvueInfo: false
+    }
+  },
   mounted() {
-    this.setuserinfo();
-    console.log(this.$store);
-    console.log(this.userinfo);
+    console.log(this.mpvueInfo);
   },
   methods: {
     ...mapMutations({
-      setuserinfoVuex: 'SET_USERINFO'
+      setMpvueInfoVuex: 'SET_MPVUEINFO'
     }),
-    setuserinfo() {
-      let vueTest = {
-        name: 'mpvueTest'
-      }
-      this.setuserinfoVuex(vueTest);
-    },
     turnToVuexPage() {
       wx.navigateTo({
         url: '/pages/vuexPage/vuexPage'
       })
-    }
+    },
+    getMpvueInfo() {
+      this.showMpvueInfo = true;
+    },
+    commitMpvueInfo() {
+      let mpvueInfoUpate = '基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。---created by 美团点评'
+      this.setMpvueInfoVuex(mpvueInfoUpate);
+    },
   },
   computed: {
     ...mapGetters([
-      'userinfo'
+      'mpvueInfo'
     ])
   }
 }
 </script>
 
 <style>
+.mpvueInfo-desc {
+  margin-top: 15px;
+  font-size: 18px;
+  color: #333;
+  text-align: justify;
+  word-break: break-all;
+}
+.mt-15 {
+  margin-top: 15px;
+}
 </style>

src/pages/vuexPage/index.vue

@@ -1,22 +1,44 @@
 <template>
   <div class="page">
-    vuexPageB
+    <div class="page__bd page__bd_spacing">
+      <div class="mpvueInfo-desc">{{mpvueInfo}}</div>
+      <button type="primary" class="mt-15" @click="commitMpvueInfo">再次更新 state => mpvueInfo</button>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
 export default {
   mounted() {
-    console.log(this.userinfo);
+    console.log(this.mpvueInfo);
   },
   computed: {
     ...mapGetters([
-      'userinfo'
+      'mpvueInfo'
     ])
+  },
+  methods: {
+    ...mapMutations({
+      setMpvueInfoVuex: 'SET_MPVUEINFO'
+    }),
+    commitMpvueInfo() {
+      let mpvueInfoUpate = '基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。---created by美团点评,github 地址：https://github.com/Meituan-Dianping/mpvue'
+      this.setMpvueInfoVuex(mpvueInfoUpate);
+    }
   }
 }
 </script>
 
 <style>
+.mpvueInfo-desc {
+  margin-top: 15px;
+  font-size: 18px;
+  color: #333;
+  text-align: justify;
+  word-break: break-all;
+}
+.mt-15 {
+  margin-top: 30px;
+}
 </style>

src/store/getters.js

@@ -1 +1 @@
-export const userinfo = state => state.userinfo;
+export const mpvueInfo = state => state.mpvueInfo;

src/store/mutation-types.js

@@ -1,3 +1,3 @@
 // mutation 常量
 
-export const SET_USERINFO = 'SET_USERINFO';
+export const SET_MPVUEINFO = 'SET_MPVUEINFO';

src/store/mutations.js

@@ -1,7 +1,7 @@
 import * as type from './mutation-types';
 const mutations = {
-  [type.SET_USERINFO](state, userinfo) { // eslint-disable-line
-    state.userinfo = userinfo;
+  [type.SET_MPVUEINFO](state, mpvueInfo) { // eslint-disable-line
+    state.mpvueInfo = mpvueInfo;
   }
 }
 

src/store/state.js

@@ -1,7 +1,5 @@
 const state = {
-  userinfo: {
-    'name': 'mpvue'
-  }
+  mpvueInfo: '基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。'
 }
 
 export default state;