Vue全家桶-Vuex深入讲解

简介

在Vue项目中，我们经常用到状态管理库Vuex来管理应用状态。Vuex通过一个集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装

使用npm安装：

npm install vuex --save

基本概念

State

Vuex使用一个单一状态树，用一个对象包含了全部应用层级状态。

Getter

Getter可以看作是Store的计算属性。Getter接受state作为第一个参数。

Mutation

更改Vuex状态的唯一方法是提交mutation。Mutation必须是同步函数。

Action

Action和Mutation类似，不同的是它不能直接更改状态，而是通过提交Mutation来改变状态，一般用于异步逻辑或复杂逻辑处理。

Module

当页面越来越复杂时，可以将Vuex分割成多个模块，每个模块拥有自己的state、mutation、getter和actions。不同模块的状态在全局上的state中以模块名区分。

使用

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
     getCount: state => state.count
  },
  modules: {
    moduleA: {
      state: {},
      mutations: {},
      actions: {},
      getters: {}
    }
  }
})

export default store

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
    el: '#app',
    store,
    render: h => h(App)
})

示例1

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Add Count</button>
    <button @click="incrementAsync">Add Count Async</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'getCount'
    ]),
    count () {
      return this.getCount
    }
  },
  methods: {
    ...mapActions([
      'incrementAsync',
      'increment'
    ])
  }
}
</script>

示例2

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userName: ''
  },
  mutations: {
    setUserName (state, userName) {
      state.userName = userName
    }
  }
})

// 实例中使用：store.commit('setUserName', 'mark')

结语

在本篇文章中，我们深入学习了Vuex的基本概念，并通过代码示例演示了Vuex的使用。Vuex大大简化了应用的数据流管理，让我们开发更放心。