Vuex是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式筛欢。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化唇聘。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension版姑，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能迟郎。

核心概念

• state剥险，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
• mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)
• actions宪肖，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化表制。
• Getter健爬，store 的計(jì)算屬性，

State

在 Vue 組件中獲得 Vuex 狀態(tài)

• 通過在根實(shí)例中注冊(cè) store 選項(xiàng)么介，該 store 實(shí)例會(huì)注入到根組件下的所有子組件中娜遵，且子組件能通過 this.$store訪問到

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

<template>
  <div class="about">
    <h1>這是一個(gè)關(guān)于頁面{{count}}</h1>
  </div>
</template>
<script>
export default {
  name: "commerceUser",
  data () {
    return {
      count: this.$store.state.count,
    }
  }
}
</script>

• 當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余壤短。為了解決這個(gè)問題魔熏，我們可以使用mapState 輔助函數(shù)，通過將最終對(duì)象傳給computed屬性鸽扁，幫助生成計(jì)算屬性蒜绽。

<template>
  <div class="about">
    <h1>這是一個(gè)關(guān)于頁面{{count}}</h1>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "commerceUser",
  computed: {
    ...mapState(['count'])
  },
}
</script>

mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation，每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)桶现。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:2
  },
  mutations: {
    add (state)//add (state,step) {
        state.count++
    }
  },
  actions: {
  },
  modules: {
    
  },
   getters:{
    
   }
})

<template>
  <div class="about">
    <h1>{{$store.state.count}}</h1>
    <button @click="bt">+1</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "commerceUser",
      data () {
        return {}
      },
  methods:{
      bt(){
         this.$store.commit('add')
      }
  }
}
</script>

可以在組件中使用 this.$store.commit('xxx') 提交 mutation躲雅，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用。

<template>
  <div class="about">
    <h1>{{$store.state.count}}</h1>
    <button @click="bt">+1</button>
  </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
  name: "commerceUser",
      data () {
        return {}
      },
  methods:{
     ...mapMutations(['add']),
     bt(){
         this.add()
     }
  }
}
</script>

actions

Action 類似于 mutation骡和，不同在于：

• Action 提交的是 mutation相赁，而不是直接變更狀態(tài)。
• Action 可以包含任意異步操作慰于。

Getter

Vuex 允許我們?cè)?store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）钮科。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來婆赠，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算绵脯。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  getters:{
        show(state){
            return '當(dāng)前最新數(shù)據(jù)'+state.count
        }
    }
})

<template>
  <div class="about">
    <h1>這是一個(gè)關(guān)于頁面{{this.$store.getters.show}}</h1>
  </div>
</template>