vuex相關

vuex應用的核心就是store（倉庫），「store」基本上就是一個容器，它包含着你的應用中大部分的狀態。

vuex和單純的全局對象的不一樣點：

1.vuex的狀態存儲是響應式的，store狀態發生變化的時候，其對應的組件也會高效更新；

2.不能直接修改store的狀態，修改它惟一的途徑就是顯示的提交mutation，方便跟蹤每一個狀態的變化。

 

state

vuex能夠經過state獲取相應狀態，爲了方便組件更好的調用能夠寫到計算屬性裏

簡單寫法：

import { mapState } from 'vuex'

computed: {

  ...mapState(['age'])

}

 

getter

用於從store中派生出一些狀態，getter的返回值會根據它的依賴被緩存起來，只有當它的依賴值發生改變纔會被從新計算

使用方法相似state：

this.$store.getters.isAdult

簡單寫法：

import { mapGetters } from 'vuex'

computed: {

  ...mapGetters(['isAdult'])

}

 

mutation

它是更改vuex的store中的狀態的惟一方法。它相似於事件，每一個mutation都有一個字符串的事件類型和一個回調函數。

回調函數第一個參數是state，第二個參數是載荷（payload），載荷通常是個對象

必須是同步函數

其實直接賦值也能夠修改狀態，在vuex實例新增屬性strict：true屬性能夠禁止直接修改，可是隻能用於開發環境。

簡單寫法：

import { mapMutations } from 'vuex'

methods: {

  ...mapMutations(['updateAge'])

}

mounted: function () {

  this.updateAge(26)

}

 

action

相似於mutation，不一樣在於：

action提交的是mutation，而不是直接更改狀態

action能夠包含任意異步操做

簡單寫法：

import { mapActions } from 'vuex'

methods: {

  ...mapActions(['updateAgeAsync'])

}

mounted: function () {

  this.updateAgeAsync({

    age: 12,

    time: 2000

  })

}

 

模塊

state

使用方法