Vuex状态管理总结

一、什么是 Vuex

1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

2、Vuex 采用集中式存储和管理应用中所有组件的状态

3、Vuex 应用的核心是 store（仓库）-- 包含 state（组件中的共享状态）和 mutations（改变状态的方法）

二、Vuex 的安装

1、在项目根目录终端引入：

npm install vuex --save

 

2、在 main.js 中加入：

import store from './store'

 

三、Vuex 核心概念

1、State

state 可以看作是所有组件的 data，用于保存所有组件的公共数据。

2、Getters

getters 可以看作是所有组件的 computed 属性，getters 的返回值会根据它的依赖被缓存起来，只有当它的依赖值发生改变才会被重新计算。

3、Mutations

mutations 可以看作是 store 中的 methods，其中保存着更改数据的回调函数。

4、Actions

actions 类似于 mutations，区别在于：

• actions 提交的是 mutations 而非直接变更状态
• actions 中可以包含异步操作，而mutations 中不允许出现异步

5、Modules

由于使用单一状态树，当应用变得非常复杂时，store 对象会变得相当臃肿，Vuex 允许将 store 分割成模块（module）。每个模块拥有自己的 state、mutations、actions、getters、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

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

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

 

四、Vuex 的使用

1、Vuex 获取 store 数据

通过 store.state 来获取状态对象，示例：

store.js 文件：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 1
  },
  mutations: {
    changeFunction (state, num) {
      state.num++
    }
  }
})

main.js 文件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

views/demo.vue 文件：

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getNum">getNum</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '0'
    }
  },
  methods: {
    getNum () {
      this.msg = this.$store.state.num
    }
  }
}
</script>

运行效果：

2、Vuex 修改 store 数据

通过 store.dispatch 方法触发状态变更，示例：

store.js 文件：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 1
  },
  mutations: {
    changeFunction (state, num) {
      state.num++
    }
  },
  actions: {
    changeNum ({ commit }, obj) {
      commit('changeFunction', obj)
    }
  }
})

main.js 文件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

views/demo.vue 文件：

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getNum">getNum</button>
    <button @click="changeNum">changeNum</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '0'
    }
  },
  methods: {
    getNum () {
      this.msg = this.$store.state.num
    },
    changeNum () {
      this.$store.dispatch('changeNum', 100000)
      this.msg = this.$store.state.num
    }
  }
}
</script>

运行效果：