深入理解Vuex

什麼是Vuex

  Vuex是實現組件全局狀態管理的一種機制，可以方便的實現組件之間數據的共享。使用Vuex可以集中的管理共享數據，高效實現數據共享，另外Vuex的數據是響應式的，可以實時保持數據與頁面的同步。

安裝方式

  在使用vue-cli3或4建立項目的時候，有選項是否要安裝Vuex，安裝即可。項目完成之後，可以看到有一個store的文件夾，文件的內容：

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

Vue.use(Vuex)

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

Vuex的使用

  1.state：存放共享數據

state: {
    // 文本框的內容
    inputValue: 'aaa'
},

  訪問共享數據的兩種方式：

	1）this.$store.state.inputValue 
	
	2）import { mapState } from 'vuex'
		
	   computed: {
	        // 展開運算符，將全局變量映射爲自己界面的變量
			...mapState(['inputValue']) 
       }

  2.mutation：修改vuex中的數據

    // 更新文本框的值
    setInputValue (state, value) {
      state.inputValue = value
    },

  界面上使用的兩種方式：

	1）this.$store.commit('setInputValue', value)
	
	2）import { mapMutations } from 'vuex'
		
	   methods:{
	       ...mapMutations(['setInputValue'])
       }

  3.action：處理異步任務，異步變更數據使用action，但是在action中還是要觸發mutation的方式間接變更數據

state: {
    // 所有的任務列表
    list: []
},
mutations: {
    initList (state, list) {
      state.list = list
    }
},
actions: {
    getList (context) {
      axios.get('/list.json').then(({ data }) => {
        console.log(data)
        context.commit('initList', data)
      })
    }
},

  界面上使用的兩種方式：

	1）this.$store.dispatch('getList')
	
	2）import { mapActions } from 'vuex'
		
	   methods:{
	       ...mapActions (['getList'])
       }

  4.getter：對store中的數據進行加工處理形成新的數據，但是並不會修改store中的數據

getters: {
    // 統計未完成的任務數量
    unDoneLength (state) {
      return state.list.filter(x => x.done === false).length
    }
}

  界面上使用的兩種方式：

	1）this.$store.getters.unDoneLength 
	
	2）import { mapGetters } from 'vuex'
		
	   computed: {
	        ...mapGetters(['unDoneLength'])
       }

總結

  Vuex作爲vue的核心插件，大家可以適當的用起來哈。