No.8 vue-element-admin 学习使用（三）vuex学习，登录方法分析

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

由于保存登录状态用到了vuex，之前没系统学过vuex，先学一下vuex吧。

vuex叫做状态管理模式集中的存储组件的状态，我的理解就是存数据。

Vuex 应用的核心是 store（仓库）

Vuex 和单纯的全局对象有以下两点不同

Vuex 的状态存储是响应式的
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation 接下来是vuex的几个核心概念
State 从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

computed: {
    count () {
      return this.$store.state.count 
    }
  }

在属性很多时，都用计算属性很复杂，可以用mapState辅助函数帮助我们生成计算属性

computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

2.Getters，理解为store 的计算属性

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }

使用mapGetters可以把store 中的 getter 映射到局部计算属性

computed: {
    ...mapGetters([      'doneTodosCount',      'anotherGetter',      // ...    ])
  }

也可以给getter属性重命名

...mapGetters({
  doneCount: 'doneTodosCount'
})

mutation

mutations: {
    increment (state) {
      state.count++
    }
  }

不能直接调用mutations，需要用

store.commit('increment')

store.commit可以传额外的参数，参数也可以是对象，对象就可以包含多个字段。

mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

mutation 都是同步事务

Action Action类似于mutation，但是可以包含异步操作。

actions: {
    increment (context) {
      context.commit('increment')
    }
  }

可以使用ES2015参数解构处理

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

Action 可以通过 store.dispatch 方法触发，emm Action看起来比较复杂一点，实战中再看吧，基本上是进行一些异步请求等操作的。

Modules 应用很复杂的时候，防止一个store过大，进行的切分每个模块拥有自己的 state、mutation、action、getter。定义moduleA，moduleB，然后在store里注册这两个module，就可以调用了

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b ```
// -> moduleB 的状态

别的细节就等遇到再分析吧，回到vue-element-admin代码上。

this.$store.dispatch('user/login', this.loginForm)

很明显，调用的一个user/login的action，官方教程诚不欺我

this.$router.push({ path: this.redirect || '/', query: this.otherQuery })

跳转到根目录，至此登录完成，token，cookies存储完成，对vuex的使用方式也大致了解了。