Vuex

JS 触发 history.pushState()、history.replaceState()

Vuex

一、Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

也就是说，vuex是基于 vue 框架的一个状态管理库，那么什么是状态管理呢？

状态管理模式：简单来说就是集中式的存储管理组件的状态思想

二、Vuex 解决了什么

我们思考一个场景：

比如我们有一个在线多人聊天的，类似微信的，我们有一个通知栏来告诉用户是否有未读信息，但是出现了通知栏偶尔会给出错误的通知，也就是用户收到一条新的未读消息的通知，但是当他们检查它是什么时，这只是他们已经

看到的消息。

这是为什么呢？因为这里面

多个组件 / 实例依赖于同一状态，兄弟组件之间的状态是无法传递。

并且来自不同视图的行为当需要变更同一状态的时候，经常需要通过事件等来变更和同步状态，当遗漏的时候就会出现有些地方状态更新错误。

var Vo= {}

var A = new Vue({ data: Vo

})

var B = new Vue({ data: Vo

})

比如某个数据，在实例A和实例B中使用了，而这个数据在实例A中修改了，如果我们不做处理，这个状态是不会更新到实例B中的，对于实例B来说，这个数据是没有发生改变的。小型的项目我们还比较好处理，对实例B更新就好

了。

但是，当我们在做大型的开发的时候的话，往往会有多个实例 / 组件（A，B，C，D…）共享一个数据，这种情况它们之间互相关联，导致数据的复杂性大大增加，数据的状态变得不可预测或难以理解。结果就是应用程序变得无法扩展或维

护，变得臃肿难以维护及复用

1. 规范化
2. 便于调试

Flux 模式的基本思想:

单一数据来源数据是只读的

更新是同步的

二、Vuex 的好处

1. 首先多层嵌套的组件、兄弟组件间的状态会更好管理维护，且使用 vuex 也是组件通信中的一种
2. 减轻服务端压力，对于同一份数据集，请求会缓存，所有共用
3. 当一个项目比较大型的时候，这是便于团队之间开发和维护的，和便于调试

二、五个核心的概念 state / getters / mutations / action / modules

在 Vuex 中，核心就是一个 “store” 仓库，包含我们应用中的大部分状态，同时提供包含 state / getters / mutations / action / modules等在内的管理调用方法。

1、state state 的存储状态类似于就组件中data，是我们所有的集中数据的地方，访问 “store” 的状态可以使用两种方式，

通过 this.$store.state属性的方式或者 mapState 辅助函数。

//存储 const store = new Vuex.Store({

// 存储状态数据 state: {

count: 0, info:{

name:"wenmo", age:18

} },

)

//读取方式 computed: {

count () { return store.state.count

} }

//下面这种是全局注册了store的 computed: {

count () { return this.$store.state.count

} }

computed: { // 使用对象展开运算符将此对象混入到外部对象中

...mapState({ // ...

})

}

2、getters getters 就是类似组件中的计算属性，可以简单理解为 state 的计算属性，依赖于 state 的值，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)

} }

})

3、mutations

mutations的作用是用来修改 “store” 里面的值，并且是唯一的方式。

我们不能直接修改 store 容器中的状态，需要先在容器中注册一个事件函数，当需要更新状态时候要通过触发该事件来完成。

const store = new Vuex.Store({ state: {

name: "wenmo"

}, mutations：{

// 注册事件 addCount(state){

state.name = "WENMO"

} }

})

//在实例中显式的调用执行

methods:{ // 显示的调用

handleAdd(){ this.$store.commit('addCount')

} }

})

1. action

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.action用于异步的修改state，它是通过muation 间接修改state的。

若需要异步操作来修改state中的状态，首先需要action来注册事件，组件视图在通过 dispatch 分发方式调用该事件，该事件内部提交mutation中的事件完成改变状态操作，总之，通过action这个中介来提交mutation中的事件

函数.

const store = new Vuex.Store({ state: {

name: "wenmo"

}, mutations：{

// 注册事件 setName(state){

state.name = "WENMO"

} };

// 注册事件,提交给 mutation actions：{

setAction(context){ setTimeout(() => {

context.commit('setName')

}, 1000)

}, }

})

//在实例中显式的调用执行 new Vue({

el: '#app', store,

methods:{ // 显示的调用

handleAdd(){ this.$store.dispatch('setAction')

} }

const moduleA = { state: () => ({ ... }),

mutations: { ... }, actions: { ... },

getters: { ... } }

const moduleB = { state: () => ({ ... }),

mutations: { ... }, actions: { ... }

}

const store = createStore({ modules: {

a: moduleA, b: moduleB

} })

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

6、关于这五个方法的总结

state 对应的是在 store 中存储数据，类似组件中的 data getter 对应的是 store 中访问数据，类似组件中的计算属性

mutation 对应的是 store 中修改数据，并且是唯一的更新方式 action 类似于 mutation，用来代替 mutation进行异步操作的

modules 的作用是用来分割 store 的，每个 module 拥有自己的state、mutation、action、getters等

总结

Vuex 是一个专为 Vue开发的状态管理模式，使用集中式存储，管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。内部实现是 FLUX 模式，也就是约定数据的单向流动。

主要有五个属性，state / getter / mutation / action / modules，分别是用来存储数据，访问数据，修改数据，进行异步操作的，和划分模块的。

Flux 模式

一、解决什么问题当应用程序中有多个组件共享数据时，它们互连的复杂性会增加到数据状态不再可预测或不可理解的程度。因此，

应用程序变得无法扩展或维护。

举个例子就是，比如我们一个在线多人聊天，类似微信的，我们有一个通知栏来告诉用户未读信息，但是通知栏偶尔会给出错误的通知。用户将收到一条新的未读消息的通知，但是当他们检查它是什么时，这只是他们已经看到的

消息。