vuex 基礎

標簽： vue

[toc]

大綱： 什么時候用到vuex，簡介vuex，舉例子說明vuex的最佳實踐；
細節(jié)： action與mutation的區(qū)別、場景；
例子： 常用的寫法、巧妙的方案；

1. 用處

管理大型應用的公共數(shù)據(jù)，方便數(shù)據(jù)的獲取與設置；方便組件之間的通訊；

Flux 架構就像眼鏡：您自會知道什么時候需要它。

用了vuex 就不要再用其他方式來傳數(shù)據(jù)，不要用params，不要用事件，只用vuex！

1.2 場景

  • 一處修改多處同步的數(shù)據(jù)
  • 跨頁共享的數(shù)據(jù)
  • 跨組件共享的數(shù)據(jù)

2. 概念

vuex流程圖
vuex流程圖

state

單一狀態(tài)樹，管理應用層面需要共享的全部數(shù)據(jù)；

// store.js
const store = new Vuex.Store({
    state: {
        data1: 1,
        data2: 'text'
    }
})
new Vue({
    store
})

//app.vue
{
    computed: {
        count: this.$store.state.data1
    }
}

也可以分模塊來管理；

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

有個輔助函數(shù)mapState，可以方便取多個值；

// app.vue
{
    computed: {
        ...mapState(['data1', 'data2'])
    }
}

mutations

唯一允許更改狀態(tài)樹的方法，通過mutations實現(xiàn)了數(shù)據(jù)的單向流動；只能是同步執(zhí)行；

// store.js
new Vuex.Store({
    mutations: {
      increment (state, payload) {
        state.count += payload.num
      }
    }
})

// app.vue
{
    methods: {
        increment() {
            this.$store.commit('increment', {num: 1})
        }
    }
}

有輔助函數(shù)mapMutations,方便注入多個方法；

//app.vue
{
    methods: {
        ...mapMutations({
            add: 'increment'
        })
    }
}

actions

一個衍生的概念，初衷是為了方便使用vue-devtool；尤雨溪的回答

一般用于發(fā)送請求等異步操作，也可以組合多個mutation到同一個action里；

// store.js
new Vuex.Store({
    actions: {
        incrementAsync({commit}, payload) {
            setTimeout(() => {
                commit('increment', payload)
            }, 1000)
        }
    }
})

// app.vue
{
    methods: {
        incrementAsync() {
            this.$store.dispatch('incrementAsync', {num: 1})
        }
    }
}

同樣也有輔助函數(shù)mapActions來注入；

// app.vue
{
    methods: {
        ...mapActions({
            add: 'incrementAsync'
        })
    }
}

組合mutation

// store.js
{
  actions: {
    // 獲取用戶信息
    GET_USER_INFO({ commit, state }) {
      return new Promise((resolve, reject) => {
        getUserInfo(state.token).then(response => {
          if (!response.data) reject('error')
          const data = response.data
          commit('SET_ROLES', data.role)
          commit('SET_NAME', data.name)
          commit('SET_AVATAR', data.avatar)
          commit('SET_INTRODUCTION', data.introduction)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}

組合action

// store.js
{
  actions: {
    async actionA ({ commit }) {
      commit('gotData', await getData())
    },
    async actionB ({ dispatch, commit }) {
      await dispatch('actionA') // 等待 actionA 完成
      commit('gotOtherData', await getOtherData())
    }
  }
}

3. 實踐

目錄結構

從簡單到模塊化的三種項目結構

參考文章：大型項目的vuex結構 （文章末尾有github地址）

  • 簡單的vuex結構：僅僅是針對vuex的文件目錄結構，適用于小型，數(shù)據(jù)簡單的項目
store                 # 放在根目錄下
├── index.js          # 我們組裝模塊并導出 store 的地方
├── actions.js        # 根級別的 action
├── mutations.js      # 根級別的 mutation
├── getters.js        # 根級別的 getter
└── modules
    ├── a.js          # a模塊，包含各自的action,mutation...
    └── b.js          # b模塊
  • 按module劃分文件夾：當每個模塊的action，mutation有很多時，劃分出單獨的module文件夾，將action, mutation 抽出
store                 # 放在根目錄下
├── index.js          # 導出store
# 不再使用全局的action,mutation...
└── modules           # 按模塊劃分文件夾
    ├── module-a          # a模塊
    |   ├── actions.js    
    |   ├── getters.js
    |   ├── mutations.js
    |   └── index.js
    └── modeule-b         # b模塊，同上

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/module-a'
import moduleB from './modules/module-b'

export default new Vuex.Store({
  modules: { //注冊模塊
    a: moduleA,
    b: moduleB
  }
})

// store/modules/module-a/index.js

// 子模塊demo
export default {
  namespaced: true, // 使用命名空間
  state, 
  // ...
}
  • 按功能劃分組件：當邏輯越來越多，數(shù)據(jù)越來越多，按vuex模塊來封裝組件，更高度的模塊化，更容易找到對應的數(shù)據(jù)
views                 # 頁面，用于路由顯示，基礎容器
store                 # 現(xiàn)在store僅僅用于新建一個空的store
modules               # 獲取數(shù)據(jù)，傳遞數(shù)據(jù)的容器組件
├── atricle           # 文章容器
|   ├── index.vue     # 導出組件，注冊自身的store
|   ├── api           # 關于文章的api文件夾，放一個index.js
|   ├── components    # 展示組件，存放.vue文件，展示容器傳下來的
|   └── store         # 現(xiàn)在每個組件自己擁有store文件夾
|       └── ...       # 與上面的結構相同，也是存放index.js, actions.js ...
└── comment           # 另一個容器，結構同上
    └── ...

// modules/article/index.vue
import store from './store'
export default {
  // ...
  created() {
    // 動態(tài)注冊store
    this.$store.registerModule('$_article', store)
  },
  computed: {
   ...mapGetters({ articles: '$_article/articles' })
  },
  // ...
}

4. 細節(jié)

  • 開發(fā)環(huán)境使用嚴格模式，生產(chǎn)環(huán)境關閉
const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})
  • 使用常量來定義mutation, action的名字, IDE可以檢查到有沒有寫錯，也可以自動補全；
// type.js
export const INCREMENT = 'increment'
export const INCREMENT_ASYNC = 'incrementAsync'

// store.js
import * as type from './type'

{
  mutations: {
    [type.INCREMENT](state, payload) {
      state.count += payload.num
    }
  },
  actions: {
    [type.INCREMENT_ASYNC]({commit}, payload) {
      commit(type.INCREMENT, payload)
    }
  }
}

5. 一些例子

參考文獻：
Vuex官方文檔
Vuex框架原理與源碼分析 - 美團
Vuex2.0源碼分析 - 滴滴
Vuex — The core of Vue application

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容