消失的 Token

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-02

6.消失的 Token2023-06-02

7.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

消失的 Token

任务

现在有一个页面，一个输入框一个按钮
输入admin,点击按钮就切换页面

关键点

1. Vuex状态管理
   1. Vuex其实就是对数据统一管理
   2. 因为可能要管理的数据太多了，所以Vuex里面有一个配置项modules进行注册，本题就是注册了user和base，
   3. 将不同的功能模块拆分为一个独立的模块，更便于维护和扩展
   4. 单个Vuex模块有

      const TestModule = {
          namespaced: true,  // 启动命名空间
          state: {
              counter: 0,    // 单个状态属性：计数器
          },
          mutations: {
              increment(state) {
              state.counter++; // Mutation：增加计数器的值
              },
          },
          actions: {
              incrementCounter({ commit }) {
                  commit('increment'); // Action：触发增加计数器的 Mutation
              },
          },
      }
      

2. 解读vuex中的属性
   1. namespaced 启动命名空间的，避免不同模块之间的命名冲突
   2. namespaced 启动后要使用当前模块中的属性，就必须加上modules上注册时候的名称（很懵没关系，等会看下面代码对比一下就知道了）
   3. state 属性用于存储应用程序的状态数据。就是一个普通的对象
   4. getters 属性用于派生和获取状态的计算属性，可以对state中的属性进行封装处理
   5. mutations 属性用于定义同步的状态变更操作，通过commit方法来触发mutations内的方法
   6. actions 属性用于定义异步的状态变更操作，actions内的每个方法可以包含异步操作、调用后端 API 或提交多个 mutations，在组件用调用dispatch 来触发action方法
   7. modules 是进行模块化处理的，好比我们这次的题目

      const store = new Vuex.Store({
          modules: {
              base: BaseModule,
              user: UserModule, // 上面第2点提到的 加上注册的名称，这个地方注册的名称就是user，下面会写如何使用
          },
      })
      

实现过程 && 完整的代码

1. 我们细看BaseModule与UserModule文件,他们二者上区别就是UserModule上多了一个namespaced属性，根据我们上面讲到的这个题目就好解决了
2. 完整code

   computed: {
       welcome() {
           return store.getters.welcome
       },
       username() {
           return store.getters['user/username']
       },
       token() {
           return store.getters['user/username']
       }
   },
   methods: {
       // 回车/点击确认的回调事件
       login(username) {
           console.log(store);
           username && store.commit('user/login', { username, token: 'sxgWKnLADfS8hUxbiMWyb' })
           username && store.commit('say', '登录成功，欢迎你回来！')
       }
   }
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17452473.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！