Vue from scratch and build real projects (seven)

Fourteen, Vuex use

1. What Vuex that?

   Vuex is a specially developed for Vue.js application state management . It uses the status of all components centralized storage management application, and a corresponding state rules to ensure a predictable manner changed. Vuex Vue is also integrated into the official commissioning tool DevTools Extension , provides a time-travel, such as zero-configuration debugging, a snapshot of the state of import and export and other advanced debugging features. Simple point to understand is that all the data used to store state management model, where the data is used, as long as a place to change, another will change, this would resolve the vue in the parent-child components not pass value the problem, of course, the role of Vuex more than that, there are many new features, such as guards to do with routing landing interception, with localStorage to store and manage local data, and so on.

2. Vuex installation

   //npm的安装方式
   npm install vuex --save

3. Vuex simple and practical

   1. Vuex and use localStorage user state management, refresh your browser to prevent loss of user status, to achieve the following:

       //发送请求
                this.axios
                  .post(
                    "url",
                    JSON.stringify(this.userInfo)
                  )
                  .then(res => {
                    console.log(res.data);
                    if (res.status == 200 && res.data.verify == true) {
                      const userName = res.data.uphone;
                      const token = res.data.token;
                      this.$router.push({ path: "/" });
                      //将token通过commit提交到Vuex
                      this.$store.commit("getToken", token);
                      // 将登录名使用vuex传递到Home页面
                      this.$store.commit("userName", userName);
                    } else {
                      this.$notify({
                        title: "提示信息",
                        message: "账号或密码错误",
                        type: "error"
                      });
                    }
                  })
                  .catch(err => {
                    console.log(err);
                  });

   2. By Vuex localStorage storing user information and to keep the user state

      import Vue from 'vue'
      
      import Vuex from 'vuex'
      
      Vue.use(Vuex)
      
      const mutations = {
      
         userName: (state, user_name) => {
      
             state.user_name = user_name
      
           // 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初始值的情况
      
              localStorage.setItem('user_name', user_name)
      
          },
      
          getToken(state, token) {
      
              state.token = token;
      
              localStorage.setItem('token', token)
      
          },
      
      }
      
      const state = {
      
          user_name: localStorage.getItem('user_name'),
      
          token: localStorage.getItem('token'),
      
      }
      
      // getters 只会依赖 state 中的成员去更新
      
      const getters = {
      
         userPhone: (state) => state.user_name,
      
          token: (state) => state.token,
      
      }
      
      const store = new Vuex.Store({
      
          actions,
      
          mutations,
      
          state,
      
          getters
      
      })
      
      export default store

   3. So far, this function has been implemented

Fifth, to achieve the navigation sidebar

1. Sometimes, we have in the project such needs, the left side of the page is a menu bar, to the right of each menu item corresponding to the content area, click on a different menu item, the content area will display different content, how does this achieve? I took the child route rendering method, as follows:

   1. Suppose we have four menu items module, then it's routing configuration is as follows:

      {
          path: '/inform',
          name: inform,
          component: (resolve) => require(['../components/presonal/inform.vue'], resolve),
          meta: {
            isLogin: true
          },
          children: [{
              path: '/inform/course',
              name: course,
              component: (resolve) => require(['../components/presonal/slider/course.vue'], resolve)
            },
      
            {
              path: '/inform/interactive',
              name: interactive,
              component: (resolve) => require(['../components/presonal/slider/interactive.vue'], resolve)
            },
            {
              path: '/inform/system',
              name: system,
              component: (resolve) => require(['../components/presonal/slider/system.vue'], resolve)
            },
            {
              path: '/inform/privateLetter',
              name: privateLetter,
              component: (resolve) => require(['../components/presonal/slider/privateLetter.vue'], resolve)
            }
          ]
        },

   2. We then its parent route corresponding page add <router-view></router-view>to realize this function

2. So far, this function has been implemented