Vuex是什么

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态 (可以理解成 vue 组件里的某些 data )。
Vuex通俗说就是组件间数据之间的共享。

首先安装vuex

直接使用npm安装 npm install vuex或者直接到页面引入vuex.js文件。

vuex和vue区别？

首先vue是一个前端框架（与angular和react同级别），vuex只是vue的一个插件，官网说vuex是状态管理工具，其实说白了，vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器，就是说来存放处理公共数据的工具，存放的数据一变，各个组件都会更新，也就是说存放的数据是响应式的。

Vuex有五个核心概念，state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。

总结

• state => 基本数据
• getters => 从基本数据派生的数据
• mutations => 提交更改数据的方法，同步！
• actions => 像一个装饰器，包裹mutations，使之可以异步。
• modules => 模块化Vuex

State

state即Vuex中的基本数据！

单一状态树

Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。state作为构造器选项，定义了所有我们需要的基本状态参数。

在Vue组件中获得Vuex属性

• 我们可以通过Vue的Computed获得Vuex的state，如下：

1. const store = new Vuex.Store({2.      state:{3.        coust:04.      }5.   })6. const  app = new Vue({7.      store,8.       computed:{9.          count:function(){
10.            return  this.$store.state.coust
11.           }
12.        }
13.    })

每当 store.state.count在这里插入代码片 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

getters

即从store的state中派生出的状态。
getters接收state作为其第一个参数，接受其他 getters 作为第二个参数，如不需要，第二个参数可以省略如下例子：

const store = new Vuex.Store({state: {count:0}，getters: {// 单个参数countDouble: function(state){return state.count * 2},// 两个参数countDoubleAndDouble: function(state, getters) {return getters.countDouble * 2}}
})

与state一样，我们也可以通过Vue的Computed获得Vuex的getters。

const app = new Vue({//..store,computed: {count: function(){return this.$store.state.count},countDouble: function(){return this.$store.getters.countDouble},countDoubleAndDouble: function(){return this.$store.getters.countDoubleAndDouble}},//..
})

mutations

提交mutation是更改Vuex中的store中的状态的唯一方法。
mutation必须是同步的，如果要异步需要使用action。
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。（提交荷载在大多数情况下应该是一个对象）,提交荷载也可以省略的。

const store = new Vuex.Store({state: {count: 1},mutations: {//无提交荷载increment(state) {state.count++}//提交荷载incrementN(state, obj) {state.count += obj.n}}
})

actions

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
我们用如下例子来结束actions：

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

Modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割：

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

persist

Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：

安装：

npm install --save vuex-persistyarn add vuex-persist

引入：

import VuexPersistence from 'vuex-persist'

先创建一个对象并进行配置：

const vuexLocal = new VuexPersistence({storage: window.localStorage
})

引入进vuex插件：

const store = new Vuex.Store({state: { ... },mutations: { ... },actions: { ... },plugins: [vuexLocal.plugin]
}) 

安装：

npm install --save vuex-persistyarn add vuex-persist

引入：

import VuexPersistence from 'vuex-persist'

先创建一个对象并进行配置：

const vuexLocal = new VuexPersistence({storage: window.localStorage
})

引入进vuex插件：

const store = new Vuex.Store({state: { ... },mutations: { ... },actions: { ... },plugins: [vuexLocal.plugin]
}) 

版权声明：本文为CSDN博主「ReedSun」的原创文章，遵循CC 4.0 BY-SA
原文链接：https://blog.csdn.net/weixin_35955795/article/details/57412181

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！