从无到有构建vue实战项目

Posted 2022-09-04 ktddcn

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

2. 至此，该功能已实现