引入vuex 和vuex持久化

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",

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",

QMPlusVuePage/src/App.vue

@@ -10,11 +10,14 @@ export default {
   name: 'app',
   components: {
     
+  },
 }
-}
+
+
 </script>
 
 <style lang="scss">
 // 引入初始化样式
   @import '@/style/main.scss'
+
 </style>

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')

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]
+})

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
+        }
+    }
+}

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>