Vue | 『vue-vuex 精講』

〖一：VueX基本概念〗

解決什麼問題？vuex解決了狀态管理問題，通過集中管理狀态，使得state、action和view實作松耦合，進而讓代碼更易維護
           

〖二：vuex的基本使用方法〗

1.安裝vuex依賴

npm i -S vuex
           

2.使用vuex插件

import Store from 'vuex'

Vue.use(Store)
           

3.初始化vuex對象

const store = new Vuex.Store({
  state: {
    data: 'this is data'
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data
    }
  },
  actions: {
    setData({ commit }, data) {
      commit('SET_DATA', data)
    }
  }
})
           

4.執行個體化Vue對象，傳入store參數

new Vue({
  render: h => h(App),
  router,
  store
})
           

5.讀取vuex狀态

<div>{{$store.state.data}}</div>
           

6.更新vuex狀态

update() {
  this.$store.dispatch('setData', 'this is update data')
}
           

〖三：vuex子產品化〗

實際項目開發中，狀态衆多，如果全部混在一起，則難以分辨，而且容易互相沖突，
為了解決問題，vuex引入子產品化的概念，解決這個問題，下面我們定義a和b兩個子產品：           

const moduleA = {
  state: {
    data: 'this is a'
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data
    }
  },
  actions: {
    setData({ commit }, data) {
      commit('SET_DATA', data)
    }
  }
}
const moduleB = {
  state: {
    data: 'this is b'
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data
    }
  },
  actions: {
    setData({ commit }, data) {
      commit('SET_DATA', data)
    }
  }
}           

1.修改store的初始化代碼：

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
           

2.修改擷取狀态的代碼，此時需要加入子產品進行區分：

<div>{{$store.state.a.data}}</div>
<div>{{$store.state.b.data}}</div>
<button @click="update('a')">update a</button>
<button @click="update('b')">update b</button>
           

3.修改update方法：

update(ns) {
  this.$store.dispatch(`setData`, `update ${ns}`)
}
           

〖四：vuex命名空間〗

上述代碼在執行過程中，擷取狀态沒有問題，但是修改狀态會出現問題，
因為兩個子產品出現同名actions，是以此時需要使用命名空間來解決這個問題：           

const moduleA = {
  namespaced: true,
  // ...
}
           

1.修改update方法：

update(ns) {
  this.$store.dispatch(`${ns}/setData`, `update ${ns}`)
}