引入vuex 和vuex持久化

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>