[30天 Vue学好学满 DAY18] Vuex-1

Vuex 状态管理

前面提到了Event Bus可以做到全域的事件监听管理，但当系统逐渐扩张，这些状态也越来越繁杂，这时後即可透过vuex(store，可视为一个容器)，对网站中所有全域状态状态进行集中管理，且为响应式。

官方示意图

流程、分项介绍

Actions

定义行为，并透过commit触发Mutation，负责处理非同步行为(与後端沟通，如Call API)。

Mutations

接收来自Action的呼叫，依据计算逻辑对State进行操作，只有Mutations能对State进行操作、修改。
负责同步行为(改变状态)。

State

集中管理应用程序的所有状态。

Getter

store的计算属性，返回值依据其依赖预先缓存(cache)，依赖值改变时，重新计算。

Modules

当系统扩大，即使透过store进行集中管理也可能变得复杂、拥肿，vuex提供了切割的功能，将store切割成客制的模组，各自维护自己的state、mutation、action、getter

整体流程

Action -> commit -> Mutations -> 改变State -> 响应式渲染

安装

下载

// npm 
$npm install vuex --save

// yarn
yarn add vuex

引入-简易版

新增store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        // 状态管理
    },
    mutations: {
        // 业务逻辑
    },
    actions: {
        // 用来指定mutations
    },
    getters: {
        // vuex 中的计算属性
    },  
    modules: {
        // 模组
    }
})

於main.js 引入store

import store from './store'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

Modules 实例

const moduleCustomer = {
    state: {},
    mutations: {},
    actions: {},
    getters: {}
  }
  
  const moduleShop = {
    state: {},
    mutations: {},
    actions: {}
  }

export default new Vuex.Store({
    modules: {
        customer: moduleCustomer,
        shop: moduleShop
    }
})

使用切割後的store

store.state.customer // moduleCustomer 的状态
store.state.shop // moduleShop 的状态

剩下留给明天吧

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://medium.com/itsems-frontend/vue-vuex1-state-mutations-364163b3acac
https://ithelp.ithome.com.tw/articles/10185686
https://ithelp.ithome.com.tw/articles/10237349
https://medium.com/itsems-frontend/vue-vuex4-modules-ddb3eec6b834
感谢各路大神