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}`)
}