vuex是干嘛的

Vuex是用來進行公共數(shù)據(jù)方法管理的。即管理所有數(shù)據(jù)都能拿到的數(shù)據(jù)和方法

vuex的核心

• state

  1. 用于存儲公共狀態(tài)，也就是數(shù)據(jù)，可以理解為組件中的data，以對象的格式寫入即可
     state: {counter: 10}

  2. 在任何組件中都可以用$store.state.counter來獲取。但是尤大大只建議用此方法來獲取，如果要想更改數(shù)據(jù)則必須通過mutations來進行操作，因為這樣可以配合devtools插件來監(jiān)聽數(shù)據(jù)變化來自那個方法，利于排錯

• mutations

  1. Mutation方法介紹: 用于存儲公共方法，可以理解為組件中的methods,如果想要獲取state里面的數(shù)據(jù)則只需在方法里面?zhèn)鱾€state參數(shù)即可實現(xiàn)，并通過state.counter直接調(diào)用即可
  2. Mutation方法使用: 一般都是先在組件中執(zhí)行一個methods方法，然后在方法中再提交調(diào)用公共方法。this.$store.commit('方法名')//不需要加括號
  3. Mutation方法傳參：mutations里的方法允許提交時被傳參，this.$store.commi('addstus',stu)//stu便是參數(shù)，之后直接在mutations方法形參中加入這個stu即可，這個參數(shù)被稱為是mutation的載荷(Payload)
  4. Mutation的提交風格：上面通過commit進行提交是一種普通的方式，還有第二種提交方式，包含type屬性的對象,type中填寫提交的方法名，下面則是寫要傳的值這種處理方式是將commit作為對象傳過去，所以可將palyload作為對象傳過去然后調(diào)用鍵名即可
  5. Mutation的響應規(guī)則: 如果我們想要公共狀態(tài)的更新是響應式的就必須遵守一些規(guī)則
     • 只能修改已經(jīng)在store初始化好的屬性，因為響應式的原理是將存在的數(shù)據(jù)放在響應式庫中
     • 給state中的數(shù)組添加新數(shù)據(jù)時要用push方法 state.stus.push(palyload.stu)
     • 或者賦值一個新的對象
     • 給state中的數(shù)組更改數(shù)據(jù)時只能用Vue.set方法
       Vue.set(state.stus,0,'老鐵我好像變了')
     • 刪除state中數(shù)組的數(shù)據(jù)則推薦用delete或者Vue.delete
       Vue.delete( state.stus[0])
  6. Mutation命名抽取: 如果方法太多可以用常量代替方法名
     做法: 在store文件夾中創(chuàng)建mutation-types.js文件，然后在里面定義其中的常量
     export counst STUS = 'stus'
     然后在使用的地方以對象的方式引入

• getters

  1. 用于存儲計算方法，相當于組件中的計算屬性寫入格式也是一樣，并且也可以傳state參數(shù)
  2. 和平常計算屬性一樣，也需要return出去，引用的時侯通過$store.getters.方法名//不需要單獨加引號括號
  3. getters中的方法還可以傳入getters屬性，并且可以直接在方法中調(diào)用使用`return getters.方法名.length

• Action

  1. Action是專門用來觸發(fā)異步操作的，尤大大強調(diào)過異步操作絕對不可以在Mutations中使用，因為這樣devtools是檢測不到數(shù)據(jù)變化的，難以調(diào)試。
  2. Action的用法: 用法跟Mutation大體一致，但函數(shù)中參入的是context：跟store具有相同方法和屬性的對象。我們可以用它去做提交操作，也可以獲取context.state。
  3. 使用Action時，應該是先通過dispatch調(diào)用action的方法this.$store.dispatch('increment')這里dispatch中出方法外只能再傳一個參數(shù)，如果想傳多個值的話可以把一個對象傳過去。在Action執(zhí)行完后若想繼續(xù)執(zhí)行方法可在action方法中調(diào)用mutation方法

• module

  1. Module是為了避免狀態(tài)太多難以維護而出現(xiàn)的，可以理解為模塊化
  2. 首先定義一個對象在里面放四個核心屬性，module除外，然后在modules里面注冊: a:moduleA，一個模塊的基本結構就寫好了。
  3. state：用法一樣，只不過在編譯時會默認把模塊加入state中，this.$store.state.a即可獲取a模塊的狀態(tài)
  4. mutations: 用法完全一樣，不過要注意重名問題，參數(shù)是(state,值...)
  5. getters: 用法依然一樣，也要注意重名問題，參數(shù)分別是(state,getters,rootState)
  6. actions: 用法一樣也是dispatch來調(diào)用，默認的參數(shù)是(context,值)context里面有commit,dispathc,getters,rootGetters,rootState,state這些參數(shù)，帶root的是根的屬性

devtools插件d

• Vue官方發(fā)布的一個瀏覽器插件，用來監(jiān)聽Vue數(shù)據(jù)的變化等，也可以監(jiān)聽數(shù)據(jù)變化來自那個方法

其他

• 對象解構： 如果想把對象中的屬性拿出來使用可以用ES6語法中的對象解構const obj = {name: 'why',age：18}此時還不能單獨使用，const {name,age} = obj 這樣就可以單獨使用了