Vuex狀態管理基礎屬性理解

vuex狀態管理

在vue中我們可以使用vuex來儲存我們需要管理的狀態值，值一旦被修改，所有引用該值的地方就會自動更新。

1. 在src目錄下新建乙個目錄store，在該目錄下新建乙個index.js的檔案,用來建立vuex例項，然後在該檔案中引入vue 和 vuex，建立vuex.store例項儲存到變數store中，最後export default匯出store

const store = new vuex.store({})
export default store；

2. 在main.js檔案中引入該檔案

在檔案裡面新增 import store from 「./store」

new vue()

3. state:

vuex中的資料來源，我們需要儲存的資料就儲存在這裡，可以在頁面通過this.$store.state來獲取我們定義的資料

const store = new vuex.store(
})

頁面引用

4. getters：

getters相當於vue中的computed計算屬性，getter的返回值會根據他的依賴被快取起來，且只有當他的依賴值發生了改變才會被重新計算，這裡我們可以通過定義vuex的getters來獲取，getters可以用於監聽，state中值的變化，返回計算後的結果

頁面引用方法

}
}

getstatecount接收乙個引數，這個引數就是我們用來儲存資料的那個物件-----》vuex中getters寫法如下

getters:

5. mutations:

資料在頁面獲取到了，需要修改count的值，唯一的方法就是提交mutation來修改，在helloworld新增兩個按鈕，乙個加一，乙個減一；點選按鈕呼叫addfun（執行加的方法）和 reduction（執行減得方法），然後提交頁面的mutation中的方法修改值

count的值：}
+ - methods:，
reductionfun（） 
}

新增mutation，在mutation中定義兩個函式，用來對count加1和減1，就是上面commit提交的兩個方法

mutation：,
reduction（state）,
}

6. actions:

官方並不建議直接去修改store中的值，而是讓我們去提交乙個actions，在actions中提交mutation再去修改狀態值，在index.js裡面去修改，定義actions提交mutation的函式

actions：,
reductionfun（context）
}

methods:,
reductionfun()
}

這裡把commit提交mutations修改為dispatch來提交actions，效果相同

如果需要指定加減的數值，那麼直接傳入dispatch的第二個引數，然後在actions中對應的函式中接收引數傳遞給mutations中的函式進行計算

7.mapstate、mapgetters、mapactions、mapmutations輔助函式用法

import  from 'vuex'
computed:),
...mapgetters()　
},methods:).
...mapactions()
//或者
...mapactions(['adda', 'addb']),
}

以上就是vuex狀態管理最基本的概念

Vuex狀態管理 基礎屬性理解