From 0e19cd4d98f1c93ae86e1be5c9bc832decef2fee Mon Sep 17 00:00:00 2001
From: pixelqm <303176530@qq.com>
Date: Mon, 9 Sep 2019 23:02:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5vuex=20=E5=92=8Cvuex=E6=8C=81?=
 =?UTF-8?q?=E4=B9=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 QMPlusVuePage/package-lock.json        | 22 ++++++++++++++++++++--
 QMPlusVuePage/package.json             |  4 +++-
 QMPlusVuePage/src/App.vue              |  5 ++++-
 QMPlusVuePage/src/main.js              |  4 +++-
 QMPlusVuePage/src/store/index.js       | 18 ++++++++++++++++++
 QMPlusVuePage/src/store/module/user.js | 22 ++++++++++++++++++++++
 QMPlusVuePage/src/view/login/login.vue |  9 +++++++++
 7 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 QMPlusVuePage/src/store/index.js
 create mode 100644 QMPlusVuePage/src/store/module/user.js

diff --git a/QMPlusVuePage/package-lock.json b/QMPlusVuePage/package-lock.json
index 8cbf3f07..112f9a29 100644
--- a/QMPlusVuePage/package-lock.json
+++ b/QMPlusVuePage/package-lock.json
@@ -5047,8 +5047,7 @@
     "flatted": {
       "version": "2.0.1",
       "resolved": "https://registry.npm.taobao.org/flatted/download/flatted-2.0.1.tgz?cache=0&sync_timestamp=1561466276595&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fflatted%2Fdownload%2Fflatted-2.0.1.tgz",
-      "integrity": "sha1-aeV8qo8OrLwoHS4stFjUb9tEngg=",
-      "dev": true
+      "integrity": "sha1-aeV8qo8OrLwoHS4stFjUb9tEngg="
     },
     "flush-write-stream": {
       "version": "1.1.1",
@@ -7188,6 +7187,11 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz",
@@ -11599,6 +11603,20 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
+      "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
+    },
+    "vuex-persist": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-2.1.0.tgz",
+      "integrity": "sha512-H9RqXHeynBQG60rUrsinYNLoRFXkSxh2Xx8kTVFuvLRQ9jZd3HLMvm713m2r1dN/pVZBUgiIzTu6uj5hBsAOqg==",
+      "requires": {
+        "flatted": "^2.0.0",
+        "lodash.merge": "^4.6.2"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz",
diff --git a/QMPlusVuePage/package.json b/QMPlusVuePage/package.json
index 5e6880e0..cd1fcdc7 100644
--- a/QMPlusVuePage/package.json
+++ b/QMPlusVuePage/package.json
@@ -13,7 +13,9 @@
         "node-sass": "^4.12.0",
         "sass-loader": "^8.0.0",
         "vue": "^2.6.10",
-        "vue-router": "^3.1.3"
+        "vue-router": "^3.1.3",
+        "vuex": "^3.1.1",
+        "vuex-persist": "^2.1.0"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^3.11.0",
diff --git a/QMPlusVuePage/src/App.vue b/QMPlusVuePage/src/App.vue
index 0b1bb0c8..7fbd56c5 100644
--- a/QMPlusVuePage/src/App.vue
+++ b/QMPlusVuePage/src/App.vue
@@ -10,11 +10,14 @@ export default {
   name: 'app',
   components: {
     
-  }
+  },
 }
+
+
 </script>
 
 <style lang="scss">
 // 引入初始化样式
   @import '@/style/main.scss'
+
 </style>
diff --git a/QMPlusVuePage/src/main.js b/QMPlusVuePage/src/main.js
index 2c24f914..14ad568f 100644
--- a/QMPlusVuePage/src/main.js
+++ b/QMPlusVuePage/src/main.js
@@ -7,9 +7,11 @@ Vue.use(ElementUI);
 // 引入封装的router
 import router from '@/router/index'
 
+import { store } from '@/store/index'
 Vue.config.productionTip = false
 
 new Vue({
     render: h => h(App),
-    router
+    router,
+    store
 }).$mount('#app')
\ No newline at end of file
diff --git a/QMPlusVuePage/src/store/index.js b/QMPlusVuePage/src/store/index.js
new file mode 100644
index 00000000..44c21262
--- /dev/null
+++ b/QMPlusVuePage/src/store/index.js
@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import VuexPersistence from 'vuex-persist'
+
+import { User } from "@/store/module/user"
+Vue.use(Vuex)
+
+
+
+const vuexLocal = new VuexPersistence({
+    storage: window.localStorage
+})
+export const store = new Vuex.Store({
+    modules: {
+        User
+    },
+    plugins: [vuexLocal.plugin]
+})
\ No newline at end of file
diff --git a/QMPlusVuePage/src/store/module/user.js b/QMPlusVuePage/src/store/module/user.js
new file mode 100644
index 00000000..2af5c63d
--- /dev/null
+++ b/QMPlusVuePage/src/store/module/user.js
@@ -0,0 +1,22 @@
+export const User = {
+    namespaced: true,
+    state: { userName: "QM" },
+    mutations: {
+        setUserName(state, name) {
+            // 这里的 `state` 对象是模块的局部状态
+            state.userName = name
+        }
+    },
+    actions: {
+        AsyncSetUserName({ commit }, name) {
+            setTimeout(() => {
+                commit("setUserName", name)
+            }, 2000);
+        }
+    },
+    getters: {
+        userName(state) {
+            return state.userName
+        }
+    }
+}
\ No newline at end of file
diff --git a/QMPlusVuePage/src/view/login/login.vue b/QMPlusVuePage/src/view/login/login.vue
index ecff8e30..8a1e0c6e 100644
--- a/QMPlusVuePage/src/view/login/login.vue
+++ b/QMPlusVuePage/src/view/login/login.vue
@@ -10,8 +10,17 @@
 </template>
 
 <script>
+import {mapState, mapGetters, mapActions , mapMutations} from 'vuex'
 export default {
     name:"Login",
+    computed:{
+    ...mapGetters("User",["userName"]),
+    ...mapState("User",["userName"])
+    },
+    methods: {
+        ...mapActions("User",["AsyncSetUserName"]),
+        ...mapMutations("User",["setUserName"])
+    },
 }
 </script>