Vue學習筆記:Vuex

爲什麼需要Vuex

• 管理共享狀態
• 解決一份數據在多個組件中試用的困難
• 系統化的狀態管理，區別於小型狀態過來

底層設計模式：

全局單例模式

應用場景

• 適合中大型項目；
• 小項目反而會因爲引入更多概念和框架而帶來複雜性

Vuex運行機制

下圖和state->vue->action流程差不多，只是多了個Mutations，用於Devtools監控調試。改圖必須牢記。方能在後續編碼中熟練運用。

如何在Vue中使用Vuex

準備工作

vue create vue_demo
cd vue_demo
npm i vuex
npm run serve

開頭導入

import Vuex from 'vuex'
Vue.use(Vuex)

創建store實例

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  action:{
    increment({commit}) {
      setTimeout(()=>{
        commit('increment')
      }, 3000)
    }
  }
})

組件

<template>
  <div id="app">
  {{count}}
  </div>
  <button @click="$store.commit('increment')">click</button>
  <button @click="$store.dispatch('increment')">click</button>
</template>

Script

export default{
  name:"app",
  conputed:{
    count(){
      return 0;
    }
  }
}

Vuex底層原理及核心概念

Vuex實踐

 使用常量代替Mutation事件類型Vuex實踐

//mutation-types.js
export const SOME_MUTATION = "SOME_MUTATION"


//store.js
import Vuex from 'vuex'
improt {SOME_MUTATION} from './mutation-types'


const store = new Vuex.Store({
  state :{…}，
  mutations:{
    [SOME_MUTATION](state){
    //mutate state
    }
  }
}

Module

• 開啓名稱空間 namespaced:true
• 嵌套模塊不要過深，儘量扁平化
• 靈活應用 createNamespacedHelpers