状态管理vuex

一,安装

1)npm install vuex --save

2)在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

当使用全局 script 标签引用 Vuex 时,不需要以上安装过程

二,使用

多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。

1)创建一个 store

var store = new Vuex.Store({
state: {
},
mutations: {
},
modules: {
}
});

由于 store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

2)在 Vue 组件中获得 Vuex 状态

由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。

Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  store
})

通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store访问到

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。

3)更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

store.commit('xxx');可以在组件中使用 this.$store.commit('xxx') 提交 mutation

Mutation 必须是同步函数

4)Action 类似于 mutation,不同在于:

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

Action 通过 store.dispatch 方法触发:store.dispatch('increment');在组件中使用this.$store.dispatch('xxx')分发 action。

5)Vuex 允许我们将 store 分割成模块(module)

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

原文地址:https://www.cnblogs.com/colorful-coco/p/6371312.html