状态管理Vuex全解

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

vuex

1. Vue Component --> dispatch 触发异步的 Actions
2. Actions --> commit 触发同步的 Mutations
3. Mutations --> 修改 State 里面的值
4. State 修改以后 --> 会触发 Vue Component 视图的渲染

---

代码示意

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

import state from './state.js'
import getters from './getters.js'
import mutations from './mutations.js'
import actions from './actions.js'
import user from './module/user'

Vue.use(vuex)

export default new Vuex.Store({  // 创建vuex 实例
  // 参数传递
  state,
  getters,
  mutations,
  actions,
  modules: {
    user
  }
})

---

State

• 根级别的 state

// store/state.js
const state = {
  // 数据源, 类似与 data
  appName: 'admin'
}
export default state

• 在模块中定义 state

// store/module/user.js
const state = {
  userName: 'yym'
}
const getters = {
  // ...
}
const mutations = {
  // ...
}
const actions = {
  // ...
}

export default {
  // namespaced: true  命名空间
  state,
  mutations,
  actions
}

• 组件中获取 state 的值

---

Getter

类似于组件中的计算属性

• 根级别的getters

// src/getters.js
const getters = {
  // 基于 appName 计算
  appNameWithVersion: (state) => {
    return state.appName + 'v2.0'
  }
}
export default getters

• 模块里的 getters

const state = {
    userName: 'yym'
}
// 可以用于多个组件
const getters = {
    firstLetter: state => {
        return state.userName.substr(0, 1)
    }
}
const mutations = {

}
const actions = {

}

export default {
    state,
    getters,
    mutations,
    actions
}

• 组件中获取 getters 的值

---

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交mutation。

• 根级别的 mutations

import Vue from 'vue'

const mutations = {
    /**
        * @param {state}  第一个参数 state 同级的 state 对象
        * @params {params} 第二个参数, 文档中为载荷, 就是一个参数
        * params 1. 可以是一个值 2. 可以是一个对象
        */
    SET_APP_NAME (state, params) {
        // 1. 值
        state.appName = params

        // 2. 对象
        state.appName = params.appName
    },

    // 设置一个state 没有的值 version
    SET_APP_VERSION (state) {
        Vue.set(state, 'appVersion', 'v2.0')
    }
}

export default mutations

• 组件中提交 mutations 的值

---

Action

Action 类似于 mutation，不同在于：

1. Action 提交的是 mutation，而不是直接变更状态。
2. Action 可以包含任意异步操作

• 模拟异步请求

// app.js
export const getAppName = () => {
  return new Promise((resolve, reject) => {
        const err = null
        setTimeout(() => {
            if(!err) resolve({ code: 200, info: {appName: '新的值'}})
            else reject(err)
        })
    })
}

• 根级别的 actions

import { getAppName } from 'app.js'

const actions = {
    // 1. promise
    updateAppName ({ commit }) {
        getAppName().then(res => {
            console.log(res)
            const { info:{appName} } = res
            commoit('SET_APP_NAME', appName)
        }).catch(err => {
            console.log(err)
        })
    },

    // 2. async await
    async updateAppName({ commit }) {
        try {
            const { info:{appName} } = await getAppName()
            commoit('SET_APP_NAME', appName)
        } catch(err) {
            console.log(err)
        }
    }
}

export default actions

• 组件中分发 actions