消失的 Token

习题链接

消失的 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', '登录成功，欢迎你回来！')
       }
   }