Vuex 使用教程 Store 状态管理 详细解析 初学者（大师进价篇）

Vuex 解析

简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

“单向数据流” 理念的简单示意图

单向流 缺点

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏： 多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为

Vuex 优势

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

入门

快速上手

Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1 . Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2 . 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化

创建 store.js

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

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Vue 配置

main.js 导入

import store from 'store.js'

注入 store 机制

new Vue({
  el: '#app',
  store: store,
})

组件 页面使用

<template>.</template>

<script>
	export default{  
	methods: {
	increment() {
	   this.$store.commit('increment')
	   console.log(this.$store.state.count)
	}
}
	}
</script>

---

改变 store 中的状态 ：提交 commit ==》mutation 改变 状态 =》increment 方法=》通过 this.$store.state 来获取状态对象

进价

在 Vue 组件中获得 Vuex 状态

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

---

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM

缺点：导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态

mapState 辅助函数

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default { 
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
	
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
   
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

---

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符

我们可以极大地简化写法：

export default { 
	computed: { 
	  // 使用对象展开运算符将此对象混入到外部对象中
	  ...mapState({
	     "count"
	  })
	}
}

store 中的 state 中派生出一些状态

Getter 辅助函数

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

在组件 计数方式

export default{
	computed: {
	  doneTodosCount () {
		    return this.$store.state.todos.filter(todo => todo.done).length
		  }
	}
}

---

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想

getter 函数 方式

实例

store.js

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

组件中 通过属性访问

		this.$store.getters.doneTodos 

---

我们可以很容易地在任何组件中使用它

export default{
	computed: {
		this.$store.getters.doneTodos
 	}
 } 
 

通过方法访问

通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用

实例

store.js

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
   getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
  }
  }
})

组件中使用

export default{
	computed: {
		this.$store.getters.getTodoById(2)
 	}
 } 

---

getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

实例

import { mapGetters } from 'vuex'

export default { 
  computed: { 
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

mapGetters 设置 属性 取别名

实例

import { mapGetters } from 'vuex'

export default { 
  computed: { 
  ...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})
  }
}

提交载荷

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

实例

store.js

const store = new Vuex.Store({
  state: {
   content:''
  },
mutations: {
  increment (state, n) {
    state.content+= n
  },
  increment_obj (state, payload) {
    state.count += payload.amount
  }
}
})

---

increment_obj 载荷对象

组件中使用

载荷对象 或 字段 方式1：

export default{
	computed: {
		this.$store.commit('increment', '追加内容')
 		this.$store.commit('incremen_obj,
 		{
 		amount: 10
 		}
 		)
 	}
 } 

载荷对象 方式2： 对象风格的提交方式

export default{
	computed: {
		store.commit({
			type: 'increment_obj',
			amount: 10
			})
 	}
 } 

高级

同步异步

一条重要的原则就是要记住 mutation 必须是同步函在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务

Action 异步处理

Action 类似于 mutation，不同在于

1.Action 提交的是 mutation，而不是直接变更状态

2. Action 可以包含任意异步操作

实例


store.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

---

action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

异步 执行 流程：actions=>increment =》commit=>increment

组件中使用

export default{
	computed: {
		this.$store.dispatch('increment')
 	}
 } 

---

Module

将 store 分割成模块（module）

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

store.js

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 的状态

---

执行流程

Store=> 加载 modules => store.state.模块

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

Modules 命名空间

命名空间：模块具有更高的封装度和复用性

添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

store.js

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: () => ({ ... }),
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,

          state: () => ({ ... }),
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

---

启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不需要修改模块内的代码