vuex知識解析
技術標籤：VueJS
文章目錄
VUEX知識解析
Vuex是什麼？
vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。通俗地可以理解為是定義了一個全域性物件，所有頁面都可以訪問。當你在state中定義了一個數據之後，你可以在當前專案中的任何一個元件裡獲取、修改該資料，並且你的修改可以讓專案中所有引用該資料的地方都做出相應的變更。
使用Vuex有什麼好處？
1、共享狀態：不同元件之間，可進行狀態的修改和讀取，方便統一管理、維護；
2、資料快取：防止重新整理頁面後資料丟失，減少向伺服器請求資料，節省資源；
3、單向資料流：資料統一管理，更加易於程式的穩定。
Vuex有哪幾種屬性？
有五種，分別是 State、 Getters、Mutations 、Actions、 Modules。
State：vuex的資料來源，存放需要儲存的資料，可通過 this.$store.state來獲取state物件屬性值。
Getters：類似vue中的computed計算屬性。Getters返回值會根據依賴被快取起來，且只有當依賴值發生了改變才會被重新計算。
Mutations：同步狀態。建議只使用Mutations修改state屬性值。
Actions：非同步操作。Action 類似於mutation，但又不同於mutation，Action 提交的是 mutation，觸發state屬性值變更，不直接變更狀態。
Modules：store的子模組，為了開發大型專案，方便狀態管理而使用的。每個模組（module）擁有自己的State、Mutation、Action、Getter、甚至是巢狀子模組。
Vuex入門（2）—— state,mapState,…mapState物件展開符詳解
1.state
vuex的state和vue的data有很多相似之處,都是用於儲存一些資料,或者說狀態值.這些值都將被掛載 資料和dom的雙向繫結事件,也就是當你改變值的時候可以觸發dom的更新.
雖然state和data有很多相似之處,但state在使用的時候一般被掛載到子元件的computed計算屬性上,這樣有利於state的值發生改變的時候及時響應給子元件.如果你用data去接收$store.state,當然可以接收到值,但由於這只是一個簡單的賦值操作,因此state中的狀態改變的時候不能被vue中的data監聽到,當然你也可以通過watch $store去解決這個問題,那你可以針是一個槓精
綜上所述,請用computed去接收state
//state.js
let state = {
count: 1,
name: 'dkr',
sex: '男',
from: 'china'
}
export default state
data () {
return {
dataCount: this.$store.state.count //用data接收
}
},
computed:{
count(){
return this.$store.state.count //用computed接收
}
2.mapState 輔助函式
mapState是state的語法糖
實際作用:當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性
在使用mapState之前,要匯入這個輔助函式.
import { mapState } from 'vuex'
然後就是使用方式了
computed: mapState({
count: 'count', // 第一種寫法
sex: (state) => state.sex, // 第二種寫法
from: function (state) { // 用普通函式this指向vue例項,要注意
return this.str + ':' + state.from
},
// 注意下面的寫法看起來和上面相同,事實上箭頭函式的this指標並沒有指向vue例項,因此不要濫用箭頭函式
// from: (state) => this.str + ':' + state.from
myCmpted: function () {
// 這裡不需要state,測試一下computed的原有用法
return '測試' + this.str
}
})
3. …mapState
…mapState並不是mapState的擴充套件,而是…物件展開符的擴充套件.當然如果你把他用在這裡會發現他能使得程式碼看起來變得,更加符合常規邏輯了
computed:{
//原來的繼續保留
fn1(){ return ...},
fn2(){ return ...},
fn3(){ return ...}
......
//再維護vuex
...mapState({ //這裡的...不是省略號了,是物件擴充套件符
count:'count'
})
}
4.getters
getters相當於vue中的計算屬性，通過getters進一步處理，得到我們想要的值，而且允許傳參，第一個引數就是state
getters: {
userLogin: (state) => state.userLogin
},
5. …mapGetters
…mapGetters是mapGetters的擴充套件符，在vue中獲取vuex的getting計算出的值
computed: {
...mapGetters({'userInfo': 'user/userLogin'})
},
6. Mutation
類似於vue中的methods
mutations需要通過commit來呼叫其裡面的方法，它也可以傳入引數，第一個引數是state，第二個引數是載荷（payLoad），也就是額外的引數
mutations: { //類似於methods
addAge(state,payLoad){
state.age+=payLoad.number
}
}
7. mapMutations
跟mapState、mapGetters一樣，在vue獲取mutation中的方法
methods:{
...mapMutations(['addAge'])
}
我為什麼要繞一圈，從mutations裡面去改state呢？我能不能直接改state呢？
原因如下：
- 在mutations中不僅僅能做賦值操作
- 在mutations中做了類似埋點操作，如果從mutations中操作的話， 能被檢測到，可以更方便用除錯工具除錯，除錯工具可以檢測到實時變化，而直接改變state中的屬性，則無法實時監測
注意：mutations只能寫同步方法，不能寫非同步，比如axios、setTimeout等，這些都不能寫，mutations的主要作用就是為了修改state的。
原因類似：如果在mutations中寫非同步，也能夠調成功，但是由於是非同步的，不能被除錯工具追蹤到，所有不推薦這樣寫，不利於除錯,這是官方的約定。
8.actions
action可以提交mutation
action也不要直接去操作state，而是去操作mutation
action包含非同步操作，類似於axios請求，可以都放在action中寫
action中的方法預設的就是非同步，並且返回promise
store部分
actions: {
getUserInfo(){
return {
nickname:'Simba',
age:20
}
}
}
在actions中定義一個方法：getUserInfo，並且返回一個物件
vue部分
created(){
var res = this.getUserInfo()
console.log(res)
},
methods:{
...mapActions(['getUserInfo'])
}
9. …mapActions
在vue的methods中獲取action中的方法
...mapActions(['setLanguageAction'])
mapActions([‘getUserInfo’]) 相當於以下程式碼
getUserInfo(){
return this.$store.dispatch(‘getUserInfo’)
}
10. dispatch
執行一些查詢的獲取資料的action操作
created() {
// 獲取使用者登入資訊
this.$store.dispatch('user/SET_GET_USERINFO');
/* 獲取公司資訊 */
this.$store.dispatch('common/GETCOMPANYINFO');
},