状态管理Vuex全解

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

状态管理Vuex全解_第1张图片
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

更改 Vuexstore 中的状态的唯一方法是提交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



你可能感兴趣的:(状态管理Vuex全解)