vuex学习

发表于 | 分类于
字数统计: 3.1k word | 阅读时长 ≈ 12 min
了解Vuex
vuex是什么

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

官网

https://vuex.vuejs.org/zh/

安装
1
npm install vuex --save
引入
1
2
3
4
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
说明

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

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
最简单的store

让我们来创建一个简单的store:

首先，我们需要在某个地方存放我们的Vuex代码：

  • 这里，我们先创建一个文件夹store，并且在其中创建一个index.js文件
  • 在index.js文件中写入如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++  //改变count的状态
    }
  }
})

export default store  //导出对象

其次，我们让所有的Vue组件都可以使用这个store对象

  • 来到main.js文件，导入store对象，并且放在new Vue中
  • 这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了

单页面的状态管理

如下图，在单个组件中进行状态管理是一件非常简单的事情：

  • State：不用多说，就是我们的状态。
  • View：视图层，可以针对State的变化，显示不同的信息。
  • Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

看一个简单的单界面状态管理的例子

多界面状态管理

看一张官方的图

来重新实现一下上面的计数器案例

使用步骤小结

我们来对使用步骤，做一个简单的小结：

  • 1.提取出一个公共的store对象，用于保存在多个组件中共享的状态
  • 2.将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
  • 3.在其他组件中使用store对象中保存的状态即可
    • 通过this.$store.state属性的方式来访问状态
    • 通过this.$store.commit('mutation中方法')来修改状态
  • 注意事项：
    • 我们通过提交mutation的方式，而非直接改变store.state.count。
    • 这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。
Vuex核心概念
Vuex有几个比较核心的概念
  • State
  • Getters
  • Mutation
  • Action
  • Module
State单一状态树

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT )”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

Getters基本使用

有时候，我们需要从store中获取一些state变异后的状态，比如下面的Store中：

获取学生年龄大于20的个数：

我们可以在Store中定义getters

通过属性访问：

Getter 接受 state 作为其第一个参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
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)
    }
  }
})

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

1
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作为第二个参数：

1
2
3
4
5
6
getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

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

1
2
3
4
5
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

通过方法访问：

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

1
2
3
4
5
6
7
8
9
getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

//调用
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

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

Mutation状态更新

Vuex的store状态的更新唯一方式：提交Mutation

Mutation主要包括两部分：

  • 字符串的事件类型（type）
  • 一个回调函数（handler）,该回调函数的第一个参数就是state。

定义示例：

1
2
3
4
5
6
7
8
9
10
11
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {   //声明了一个 increment 事件
      // 变更状态
      state.count++
    }
  }
})

通过mutation更新

在自定义方法methods中，提交 在mutations中声明的事件

1
2
3
increment: function() {
	this.$store.commit('increment')  // 
}

mutation传递参数

在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数，参数被称为是mutation的载荷(Payload)

1
2
3
4
5
6
7
8
9
// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

//调用
store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

1
2
3
4
5
6
7
8
9
10
11
// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

//调用
store.commit('increment', {
  amount: 10
})

对象风格的提交方式

1
2
3
4
5
6
7
8
9
10
11
store.commit({
  type: 'increment',
  amount: 10
})

//mutation中声明方法和前面一致
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

Mutation 需遵守 Vue 的响应规则

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

  1. 最好提前在你的 store 中初始化好所有所需属性。
  2. 当需要在对象上添加 新属性 时，你应该
  • 使用 Vue.set(obj, 'newProp', 123), 或者
  • 以新对象替换老对象。例如，利用对象展开运算符

我们可以这样写：

1
state.obj = { ...state.obj, newProp: 123 }

使用常量替代 Mutation 事件类型

问题：在mutation中, 我们定义了很多事件类型(也就是其中的方法名称).当我们的项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方法越来越多.方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况.

如何避免上述的问题呢?
在各种Flux实现中, 一种很常见的方案就是使用常量替代Mutation事件的类型.
我们可以将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然.

具体做法：

我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量.
定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称.

1
2
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'   

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})
  
//或者导入全部的常量 import * as types from……  使用时直接 [types.SOME_MUTATION]

Mutation同步函数

通常情况下, Vuex要求我们Mutation中的方法必须是同步方法.

  • 主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照.
  • 但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成.
Action

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。

让我们来注册一个简单的 action：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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。

实践中，我们会经常用到 ES2015 的 参数解构

来简化代码（特别是我们需要调用 commit 很多次的时候）：

1
2
3
4
5
actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

Action的分发：

在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

1
2
3
4
5
6
7
actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Actions 支持同样的载荷方式和对象方式进行分发：

1
2
3
4
5
6
7
8
9
10
// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})
Moudle
  • Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
    • Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
    • 当应用变得非常复杂时,store对象就有可能变得相当臃肿.
    • 为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 的状态

模块的局部状态

模块内部的mutation和getter，接收的第一参数（state）是模块的局部状态对象,rootState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const moduleA = {
   state: { count: 0},
   mutations: {
     increment (state) {
      // state是模块的局部状态，也就是上面的state
      state.count++
     }
   },
   getters: {
     doubleCount (state, getters, rootState) {
      // 参数 state为当前局部状态，rootState为根节点状态
      return state.count * 2
     }
   },
   actions: {
     incremtnIfOddRootSum ( { state, commit, rootState } ) {
        // 参数 state为当前局部状态，rootState为根节点状态
        if ((state.cont + rootState.count) % 2 === 1) {
        commit('increment')
        }
     }
   }
}

命名空间

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

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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']
          }
        }
      }
    }
  }
})
0%