前端框架Vue自学之Vuex（八）

本文转载自公众号“读芯术”。作为基于JavaScript的框架，Vue.js最近几年中发展迅速，原因很多，包括框架的简单性、易于集成性、用户友好性以及限制较少等等，这些特性也帮助Vue.js在与Angular和React竞争时有一战之力。但在搜索Vue的局

Vuex 是一个专为 Vue.js 应用程序开发的状态管理构架。它采用统一式存储管理和维护所有组件的可变化的状态。也可以理解为是一种开发模式或框架，通过状态集中管理驱动组件的变化，应用级的状态集中放在store中，改变状态的方式是提交mutations，异

Vuex有五个核心概念：state：vuex的基本数据，用来存储变量geeter：从基本数据派生的数据，相当于state的计算属性mutation：提交更新数据的方法，必须是同步的。modules：模块化vuex，可以让每一个模块拥有自己的state、mu

import createLogger from 'vuex/dist/logger' // vuex调试工具。== 'prodycution' // 开发环境下开启严格模式

// ...// ...getItem: key => Cookies.get(key),setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),

两种方式访问state中的数据。import { mapState } from ‘vuex‘。拿到了state中的数据，不能直接修改（操作）数据，要通过触发mutation里的方法

这时刷新页面就可以看到控制台，打印出了列表数据。

Vuex 允许我们将 store 分割成模块。对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.

应用层级的状态应该集中到单个 store 对象中。提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。异步逻辑都应该封装到 action 里面。只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、m

　　在写vue时，将用户信息保存在vuex中，但是F5刷新之后，用户信息没有了，需要重新登陆。　　vuex中的数据在页面刷新之后其中的数据会初始化，这就导致组件之间通过vuex传递的数据在用户F5刷新页面之后会丢失。话不多说，上代码！！！

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100。

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应。用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.可以实现非父子通信的问题缓存后端数据，减少对后端的数据请求，提高用户体验.它的依赖被缓存起来，且只有

-- 以下是调用共享数据的页面：01.vue -->. 3，所有插件的使用都是在src/main.js中进行导入的。import Vue from ‘vue‘ //调用 vue 这里可以分号，也可以不添加分号。通过actions触发mut

这就是vuex设计理念。　　当然有时候可以略过Actions 让组件直接调用Mutations修改公用数据。

保存用户个人信息 ，用vuex 中变量userInfo , 原理跟token一致。

用户在登录后，可以设置他的登录信息。其实就是用来在不同的组件之间共享信息。我们使用vue-element-admin为例，来讲解VUEX的使用。构建store，这个store 支持模块，在这个store中有三个模块。actions： 就是提供给外部调用。可

哪种功能场景使用它？只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。在main.js引入store，注入。新建了一个目录store，…mutationsmutations

首先 启动Cmder vueui新建个环境。用Element组件引入 安装npm i element-ui -S. 在main.js中引入 如图。接下来在页面引入vuex. 在methods中把imgUrl穿入到vuex中的stroe文件夹下的index.

import Vue from ‘vue‘import Vuex from ‘vuex‘import getters from ‘./getters‘Vue.useconst modulesFiles = require.context// 您不需要从“.

中后台系统类多为内部人员使用。此类项目多为表单、列表、数据看板，vue生态有成熟的解决方案。产品设计风格与elementUI设计风格相近。团队成员更擅长使用Vue开发后台管理类项目，可以快速开发，节省成本。模块化开发可以解决命名冲突、文件依赖的问题，方便多