vuex狀態管理

vuex狀態管理

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

1.）新建一個vue項目

vue init webpack web  //（使用webpack創建一個項目名為web的項目）

2.）安裝vuex

npm install vuex --save

3.）啟動項目

npm run dev

4.）在src目錄下新建一個目錄store，在該目錄下新建一個index.js的文件,用來創建vuex實例，然後在該文件中引入vue 和 vuex，創建vuex.store實例保存到變數store中，最後export default導出store

{*

const store = new Vuex.Store({})

export default store；

*}

5.）在main.js文件中引入該文件
在文件裡面添加 import store from “./store”
{*

new Vue({
el:"#app",
store,
router,
...
})

*}

6.)state:
vuex中的數據源，我們需要保存的數據就保存在這裡，可以在頁面通過this.$store.state來獲取我們定義的數據

{* index.js

const store = new Vuex.store({
state :{
count:1  // (比如說這個）
}

})

helloworld.vue**

{{this.$store.state.count}}

*}

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

{*helloworld.vue

{{this.$store.state.count}}
{{this.$store.getters.getStateCount}}

index.js**
(getStateCount接收一個參數，這個參數就是 我們用來保存數據的那個對象)

getters:{
getStateCount:function(state){
return state count + 1
}

*}

8.）mutations:
數據在頁面獲取到了，需要修改count的值，唯一的方法就是提交mutation來修改，在helloworld添加兩個按鈕，一個加一，一個減一；點擊按鈕調用addFun（執行加的方法）和 reduction（執行減得方法），然後提交頁面的mutation中的方法修改值

{*

count的值：{{this.$store.state.count}}
<button @click="addFun"> + <button>
<button @click="reductionFun"> - <button>

methods:{
addFun（） {
this.$store.commit（‘add’）
}，
reductionFun（） {
this.$store.commit（‘reduction’）
}
}

index.js**
（添加mutation，在mutation中定義兩個函數，用來對count加1和減1，就是上面commit提交的兩個方法）

mutation：{
add（state）{
state.count = state.count + 1;
},
reduction（state）{
state.count = state.count - 1;
},
}

*}

9.)Actions:

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

{*

actions：{
addFun（context）{
context.commit（“add”）
},
reductionFun（context）{
context.commit（“reduction”）
},
}

helloworld.vue**

methods:{
addFun(){
this.$store.dispatch("addFun");
//this.store.commit("add")
},
reductionFun(){
this.$store.dispatch("reductionFun")
},

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

！！！基本流程已經實現，如果需要指定加減的數值，那麼直接傳入dispatch的第二個參數，然後在actions中對應的函數中接收參數傳遞給mutations中的函數進行計算

10.）
mapState、mapGetters、mapActions

{*

   import {mapState、mapGetters、mapActions} from 'vuex';

   computed:{
   ...mapState({
   count1:state  => state.count
   })
   }

*}

這樣我們就不用寫很長的方法來調用了。