目录
一、Vuex概述
1.Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
2.什么是“状态管理模式”？
由于状态管理模式口述较为困难，我们直接上例子：
计数器：
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})这个状态自管理应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意：
但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
3.Vuex的组成结构
组件派发任务到actions，actions触发mutations中的方法，然后mutations来改变state中的数据，数据变更后响应推送给组件，组件重新渲染
注：
- 只能在mutaions里修改state，actions不能直接修改state
- mutations即变化，修改state的数据，而且只能是同步的，不能存在异步的操作。如果需要异步怎么办呢？把异步操作放在actions里，拿到数据再通过mutations同步处理。
4.安装
npm install vuex --saveVuex 依赖 Promise (opens new window)。如果你支持的浏览器并没有实现 Promise (比如 IE)，那么你可以使用一个 polyfill 的库，例如 es6-promise (opens new window)。
二、Vuex核心
1.store
单一状态树即唯一数据源
vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。
(1)、 创建store
const store = new Vuex.Store({...});store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：
- state – 存放状态
- getters – state的计算属性
- mutations – 更改状态的逻辑，同步操作
- actions – 提交mutation，异步操作
- mudules – 将store模块化
注：
- store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
- 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。
完整的store的结构：
const store = new Vuex.Store({
state: {
// 存放状态
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑，同步操作
},
actions: {
// 提交mutation，异步操作
},
// 如果将store分成一个个的模块的话，则需要用到modules。
//然后在每一个module中写state, getters, mutations, actions等。
modules: {
a: moduleA,
b: moduleB,
// ...
}
});(2)、在 Vue 组件中获得 Vuex 状态
Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态
import store from 'store';
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
// 获取store中的状态
return store.state.count;
}
}
}每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。
为了解决频繁导入的问题，我们可以将store注入到vue实例对象中去，这样每一个子组件中都可以直接获取store中的状态，而不需要反复的倒入store了。
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})这样可以在子组件中使用this.$store.state.count访问到state里面的count这个状态
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
// 获取store中的状态
return this.$store.state.count;
}
}
}(3)、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
}
})
}当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])(4)、对象扩展运算符
mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符 (opens new window)，我们可以极大地简化写法：
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}这样，mapState中的计算属性就与localState计算属性混合一起了
2.getters
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：
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)
}
}
})(1)、通过属性访问
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]Getter 也可以接受其他 getter 作为第二个参数：
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}store.getters.doneTodosCount // -> 1我们可以很容易地在任何组件中使用它：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}注意：
- getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的
(2)、通过方法访问
可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }注意：
- getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
(3)、mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}如果你想将一个 getter 属性另取一个名字，使用对象形式：
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})3.Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type调用
store.commit 方法：
store.commit('increment')(1)、提交载荷（Payload）
可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：
// ... mutations: { increment (state, n) { state.count += n } }store.commit('increment', 10)
在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：
// ... mutations: { increment (state, payload) { state.count += payload.amount } }store.commit('increment', { amount: 10 })
另一种方式是直接使用包含 type 属性的对象：
store.commit({ type: 'increment', amount: 10 })整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：
mutations: { increment (state, payload) { state.count += payload.amount } }
注意：
- mutation必须是同步函数，不能是异步的，这是为了调试的方便。
- Mutation 需遵守 Vue 的响应规则
- 使用常量替代 mutation 事件类型
(2)、在组件中提交 Mutation
可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
方法1: 在组件的methods中提交
methods: {
increment(){
this.$store.commit('increment');
}
}方法2: 使用mapMutaions
用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。
import { mapMutaions } from 'vuex';
export default {
// ...
methods: {
...mapMutaions([
'increment' // 映射 this.increment() 为 this.$store.commit('increment')
]),
...mapMutaions([
add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
])
}
}
// 因为mutation相当于一个method，所以在组件中，可以这样来使用
<button @click="increment">+</button>4.actions
因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么actions就是为了异步操作而设置的。这样，就变成了在action中去提交mutation，然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数。
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
action实例：
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。
(1)、分发 Action
Action 通过 store.dispatch 方法触发：
store.dispatch('increment')Actions 支持同样的载荷方式和对象方式进行分发：
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})在组件中分发 Action：
在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：
方法1: 在组件的methods中，使用this.$store.dispatch(‘increment’)。
方法2: 使用mapActions，跟mapMutations是类似的。
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
]),
...mapActions({
add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
})
}
}
// 同样在组件中，可以这样来使用
<button @click="increment">+</button>
(2)、组合 Action
因为action是异步的，那么我们需要知道这个异步函数什么时候结束，以及等到其执行后，会利用某个action的结果。这个可以使用promise来实现。在一个action中返回一个promise，然后使用then()回调函数来处理这个action返回的结果。
actions:{
actionA({commit}){
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation');
resolve();
},1000);
})
}
}
// 这样就可以操作actionA返回的结果了
store.dispatch('actionA').then(() => {
// dosomething ...
});
// 也可以在另一个action中使用actionA的结果
actions: {
// ...
actionB({ dispatch, commit }){
return dispatch('actionA').then(() => {
commit('someOtherMutation');
})
}
}5.mudules
module是为了将store拆分后的一个个小模块，这么做的目的是因为当store很大的时候，分成模块的话，方便管理。
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 的状态(1)、模块的局部状态
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}(2)、命名空间
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
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 属性后不需要修改模块内的代码
(3)、模块动态注册
在 store 创建之后，你可以使用 store.registerModule 方法注册模块：
import Vuex from 'vuex'
const store = new Vuex.Store({ /* 选项 */ })
// 注册模块 `myModule`
store.registerModule('myModule', {
// ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
// ...
})
- 依然的，可以通过store.state.myModule来获取模块的状态。
- 可以使用
store.unregisterModule(moduleName)来动态卸载模块。注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）。
三、Vuex的使用
1.项目结构
Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
-
应用层级的状态应该集中到单个 store 对象中。
-
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
-
异步逻辑都应该封装到 action 里面。
只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。
对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：
2.简单使用
- 在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，当然也可以不建文件夹，直接新建个js文件也是可以的）
在新建的js文件中写入如下代码:
import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex); export default new Vuex.Store({ state:{ pathName: "", currDbSource: {}, currJobData: {}, DbSource: [] }, mutations:{ // 保存当前菜单栏的路径 savePath(state,pathName){ state.pathName = pathName; }, // 保存当前点击的数据源 saveCurrDbSource(state,currDbSource){ state.currDbSource = currDbSource; }, // 保存当前点击的元数据 saveCurrJobData(state,currJobData){ state.currJobData = currJobData; }, // 保存所有数据源 saveDbSource(state,DbSource){ state.DbSource = DbSource; } } })
- main.js引用：（注意路径即可）
// 引入vuex-store import store from './store/index'; new Vue({ el: '#app', router, store, render: h => h(App) });
- 保存数据：（场景举例：当我点击按钮后，我需要把当前的数据保存到vuex中，然后跳转到别的路由，然后使用这些数据）
methods:{ click(){ // 点击按钮进行一些操作，然后保存数据 this.$store.commit('saveCurrDbSource',this.db) } }
- 获取变量：（当数据初始获取不到时，可以使用计算属性用来获取）
this.$store.state.变量名
// 例如
this.$store.state.currDbSource3.模块化
把所有东西都写在一个文件中了，这样数据多的时候，耦合度太高，也不便于维护，接下来给大家介绍一下组件化开发
- state.js ：保存所有数据，以对象的方式导出
export default { pathName: '', // 路由 currDbSource: {}, // 当前数据源 currJobData: {}, // 当前元数据 DbSource: [], // 所有数据源，供元数据界面下拉列表使用 selectJobMeta: {}, // 当前选择的元数据（搜索后点击的单条数据） specialSubject: [], // 专题数据（多条） duplicateJobMeta: {}, // 复制的数据 };
- mutations.js ：保存所有方法，用来改变state的数据
// 保存当前菜单栏的路径 export const savePath = (state, pathName) => { state.pathName = pathName; }; // 保存当前点击的数据源 export const saveCurrDbSource = (state, currDbSource) => { state.currDbSource = currDbSource; }; // 保存当前点击的元数据 export const saveCurrJobData = (state, currJobData) => { state.currJobData = null; state.currJobData = currJobData; }; // 保存所有数据源 export const saveDbSource = (state, DbSource) => { state.DbSource = DbSource; }; // 保存搜索后选择的那一条元数据 export const saveSelectJobMeta = (state, selectJobMeta) => { state.selectJobMeta = selectJobMeta; }; // 保存搜索的那一类专题 export const saveSpecialSubject = (state, specialSubject) => { state.specialSubject = specialSubject; state.selectJobMeta = {}; }; // 保存复制的元数据（名称为空） export const saveDuplicateJobMeta = (state, duplicateJobMeta) => { state.duplicateJobMeta = duplicateJobMeta; };
- actions.js ：暴露给用户使用，借此触发mutations中的方法，保存数据（可执行异步操作）
// 触发保存菜单栏的路径方法 export const savePath = ({ commit }, payload) => { commit('savePath', payload); }; // 触发获取当前点击的数据源方法 export const saveCurrDbSource = ({ commit }, payload) => { commit('saveCurrDbSource', payload); }; // 触发获取当前点击的元数据方法 export const saveCurrJobData = ({ commit }, payload) => { commit('saveCurrJobData', payload); }; // 触发获取所有数据源方法 export const saveDbSource = ({ commit }, payload) => { commit('saveDbSource', payload); }; // 触发保存搜索后选择单条元数据方法 export const saveSelectJobMeta = ({ commit }, payload) => { commit('saveSelectJobMeta', payload); }; // 触发保存搜索专题数据方法 export const saveSpecialSubject = ({ commit }, payload) => { commit('saveSpecialSubject', payload); }; // 触发保存复制元数据方法 export const saveDuplicateJobMeta = ({ commit }, payload) => { commit('saveDuplicateJobMeta', payload); };这里有2种方式：
// 方法一： export const saveDbSource = (context, payload) => { context.commit('saveDbSource', payload); }; // 方法二： export const saveDbSource = ({ commit }, payload) => { commit('saveDbSource', payload); };第一种是通过 context上下文用来触发事件，一种是直接通过commit，为了保存数据，都需要加第二个参数payload，不然保存到vuex的数据就是空值
- index.js：引入相应模块，暴露出store，供vue注册后全局使用
import Vue from 'vue'; import Vuex from 'vuex'; import state from './state'; import * as actions from './actions'; import * as mutations from './mutations'; Vue.use(Vuex); export default new Vuex.Store({ state, actions, mutations });
- main.js中引入index.js
// 引入vuex-store import store from './store/index'; new Vue({ el: '#app', router, store, render: h => h(App) });
- 保存数据
import { mapActions } from 'vuex'; // 2种方式 // 方法一（dispatch） this.$store.dispatch('saveDbSource', this.DbSource); // 方法二（映射） // 1、通过methods方法添加映射关系 methods: { ...mapActions(['saveDbSource']) } // 2、使用 this.saveDbSource这里也有2种保存数据的方法：
- 直接操作方法，通过disptach派发给actions，让actions去触发
- 通过在methods中添加映射关系，数组方式，意味着我们可以在数组中写多个方法（这里数组中的每一个方法名是actions.js文件中所定义的方法名），然后在需要使用的地方直接this.方法名即可。当然，也可以直接绑定给html中的某个事件。
值的注意的是，避免和methods中自己定义的其他方法的名字冲突
- 获取数据
import { mapState } from 'vuex'; computed: { ...mapState(['DbSource']), }, watch: { DbSource(currVal) { // 监听mapState中的变量，当数据变化（有值、值改变等）， // 保证能拿到完整的数据，不至于存在初始化没有数据的问题，然后可以赋给本组件data中的变量 this.currVal = currVal; } }通过计算属性，当数据发生改变，我们可以保证拿到的是响应过后的数据，也是数组形式，意味着我们可以拿到多组数据，这里数组中的数据也是state.js中定义的变量（当然，更推荐使用我注释的那段代码，那种写法可以应对当state中存在多模块的情况，比如state.a.xxx，state.b.xxx，其中a和b都是两个模块，各自有对应的数据要存储，也可以自定义我们前面的名字来避免和data中数据重名的情况）
使用的时候，可以直接通过this.变量名拿到，例如本例中的 this.DbSource，我们可以把它赋给我们自定义的变量，也可以直接使用
值的注意的是，避免和data中自己定义的其他变量的名字冲突
参考：
扫一扫
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
