vuex入门基础

vuex

基本概念：解决什么问题？vuex解决了状态管理问题，通过集中管理状态，使得state、action和view实现松耦合，从而让代码更易维护。

vuex的基本使用方法

1. 安装vuex依赖

npm i -S vuex
cnpm 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)
    }
  }
}

修改store的初始化代码：

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

修改获取状态的代码，此时需要加入模块进行区分：

<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>

修改update方法：

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

vuex命名空间

上述代码在执行过程中，获取状态没有问题，但是修改状态会出现问题，因为两个模块出现同名actions，所以此时需要使用命名空间来解决这个问题：

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

修改update方法：

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