VUEX基础知识（vue2）

Vuex相关知识点总结，一目了然，适合入门学习。

文章目录

• 一.Vuex是什么？
• 二.个人理解
• 三.核心概念
• • 3.1.State
  • 3.2.Mutations
  • 3.3.Actions
  • 3.4.Getters

一.Vuex是什么？

Vuex是专为Vue.js应用程序开发的**状态管理模式。**采用集中式存储管理应用的所有组件的状态，并以相应的规则状态以一种可预测的方式发生变化。

二.个人理解

负责存储和管理组件间状态值的共享数据。

三.核心概念

3.1.State

个人理解为全局共享数据源，代码示例如下

<!-- 全局共享数据源，类似于java中声明全局变量 -->
const state = () => ({
  accessToken: getAccessToken(),
  username: '',
  avatar: '',
  permissions: [],
  })
<!-- //如何取出其中的值-->
<!-- 方式一：this.$store.state.变量名
     方式二：使用mapState辅助函数，生成计算属性    -->

3.2.Mutations

负责使用函数变更state中的数据源值，并用this.$store.commit函数进行调用。

//变更共享数据源中的数据，不可以使用this.$store.state修改数据。通过this.$store.commit调用函数
const mutations = {
  setAccessToken(state, accessToken) {
    state.accessToken = accessToken
    setAccessToken(accessToken)
  },
  setUsername(state, username) {
    state.username = username
  },
  setAvatar(state, avatar) {
    state.avatar = avatar
  },
  setPermissions(state, permissions) {
    state.permissions = permissions
  },
}

3.3.Actions

负责处理异步函数任务，通过this.$store.dispatch调用函数。

//处理异步函数任务，通过this.$store.dispatch触发函数
const actions = {
  setPermissions({ commit }, permissions) {
    commit('setPermissions', permissions)
  },
  //异步登录
  async login({ commit }, userInfo) {
    const { data } = await login(userInfo)
    const accessToken = data[tokenName]
    if (accessToken) {
      commit('setAccessToken', accessToken)
      const hour = new Date().getHours()
      const thisTime =
        hour < 8
          ? '早上好'
          : hour <= 11
          ? '上午好'
          : hour <= 13
          ? '中午好'
          : hour < 18
          ? '下午好'
          : '晚上好'
      Vue.prototype.$baseNotify(`欢迎登录${title}`, `${thisTime}！`)
    } else {
      Vue.prototype.$baseMessage(
        `登录接口异常，未正确返回${tokenName}...`,
        'error'
      )
    }
  },

3.4.Getters

返回加工处理后的数据，类似于实体类getter方法

//返回加工处理后的新的数据，返回值，类似于实体类的getter
const getters = {
  accessToken: (state) => state.accessToken,
  username: (state) => state.username,
  avatar: (state) => state.avatar,
  permissions: (state) => state.permissions,
}