从无到有构建vue实战项目(七)

十四、Vuex的使用

  1. Vuex是什么?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。简单点理解,就是凡是将数据用状态管理模式来存储,在用到该数据的地方,只要一处地方发生变化,另一处也会发生变化,这样就解决了vue中非父子组件传值的问题,当然了,Vuex的作用不止如此,还有许多新的功能,诸如配合路由守卫做登陆拦截,配合localStorage进行本地数据的存储与管理等等。

  2. Vuex的安装

    //npm的安装方式
    npm install vuex --save
  3. Vuex的简单实用

    1. 利用Vuex和localStorage进行用户状态管理,防止刷新浏览器后用户状态丢失,实现如下:

       //发送请求
                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. 通过Vuex和localStorage存储用户信息以保持用户状态

      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. 至此,该功能已实现

十五、侧边导航栏的实现

  1. 有时候,我们在项目中有这样的需求,页面左侧是菜单栏,右边是每个菜单项所对应的内容区,点击不同的菜单项,内容区会显示不同的内容,这个怎样实现呢?我采取了子路由渲染的方法,如下:

    1. 假设我们有四个菜单项模块,那么它的路由配置是这样的:

      {
          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. 然后我们在它的父级路由所对应的页面加上即可实现该功能

  2. 至此,该功能已实现

你可能感兴趣的:(从无到有构建vue实战项目(七))