vuex

本文由葡萄城技术团队原创并首发 转载请注明出处： 葡萄城官网 ，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 2020年9月18日Vue 3.0正式发布，距离2016年10月1日Vue 2.0发布已经过去了4年。不知道发布日期的选择是否是作者尤大有意为之，在这四年间，Vue作为个人项目取得了巨大成功，github上的 star数迅速超过10W，成为了三大前端流行框架之一，而在国内它更是作为前端初学者入门的首选占据着霸主地位。 众所周知，软件开发过程里的重构就像是凤凰浴火，浴火直至永生。2018年2月尤大就有了重构Vue，并于同年九月建立了原型的同时也创建了vue-next的repo，而后正式宣布Vue 3.0项目的启动。随后确定了早期实现的方式（class, TypeScript, hooks, time slicing）以及建立了RFC（Request for Comments，征求意见）流程。 在Composition API 确定之前，团队经历了Class API 和 Function API的讨论，功能的回退。团队始终希望保持Vue平缓的学习曲线，以及与用户一起成长的态度，Vue 3.0开发并不激进。在2019年8月确定了 Composition API RFC，随后关于3.0周边的开发也加快了步伐，并与2020年1月2日发布了alpha版本

最近开发一个项目中遇到一个切换主题皮肤的需求，特地将开发流程整理出来供大家一起探讨学习。 首先我们要先现在src文件下的style里编写项目需求的scss文件，这个过程相当恶心，而且项目经理给了几套颜色就得写几套，个人建议纸style里面建一个新的文件夹存放你写的样式。 值得注意的是编写scss文件的时候我们得在所以的css样式外层写一个class选择器将所有的样式包裹其中。 如图所示， .theme-bule { } .theme-bule{}将所有的样式都包裹其中的，这一步很重要，这个名字也不要乱取，要做到见名知其意，然后项目需要的其他主题颜色也用相同的方式写好，接着在这个样式文件夹里建一个（index.scss）文件将所以样式引出， 接着在style文件夹下找到一个一个（index.scss）的文件[ps：这里的index.scss文件和你建的那个主题颜色文件夹下的index.scss文件是不一样的哈]，这个index.scss文件是element-admin框架自带的，目的是将所有样式引入到（main.js）文件里面全局生效的，接下来我们需要在utils文件里面封装一个设置主题的方法，很简单，就说给页面body起动态class名字的，刚刚我在主题颜色css样式最外面包裹的那个class就会动态替换以达到换皮肤的效果。 有了这一步完全还是不够的，为了让主题颜色能够保存不变

看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是否有真才实学还是刚好背中了这道面试题。 （都是一些基础的vue面试题，大神不用浪费时间往下看） 一、对于MVVM的理解？ MVVM 是 Model-View-ViewModel 的缩写。 Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM

v-bind和v-model的区别 1.v-bind用来绑定数据和属性以及表达式，缩写为'：' 2.v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用 什么是 mvvm？ MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 mvvm 和 mvc 区别？ mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller

import Vue from 'vue' ; import Vuex from 'vuex' ; Vue.use(Vuex); const modulesA = { state:{ // 状态 count:100 }, getters:{ // 状态计算 addStr(state){ return state.count + '状态计算' ; } }, mutations:{ addNum(state,payload){ // 同步增加count数量 state.count += payload.count; }, deleteNum(state,payload){ // 同步减少count数量 state.count -= payload.count; } }, actions:{ asyncAddNum({commit}){ // 模拟请求之后增加count数量 setTimeout(() => { commit( 'addNum' ,{ count: 1 }) }, 1000 ); }, asyncDeleteNum({commit}){ // 模拟请求之后，减少count数量并返回Promise对象进行下一步回调操作 return new Promise((resolve,reject) => { setTimeout(() => { commit( 'deleteNum

token一种身份的验证，在大多数网站中，登录的时候都会携带token，去访问其他页面，token就想当于一种令牌。可以判断用户是否登录状态。本次页面是通过Element-ui搭建的登录界面 当用户登录的时候，向后端发起请求的时候，后端会返回给我一个token，前端可以进行校验，进行处理token 当前端拿到后端返回的token，可以通过localStorage存储到本地，然后通过jwt-decode对token进行解析，jwt-decode是一种对token的解析包，通过npm install jwt-decode 设置好存储方式后，当用户再次登录的时候，在浏览器段可以看点用户存储的token。 当页面很多地方需要用到token的时候，用户必须携带token才能访问其他页面，可以通过请求拦截和响应拦截设置，并且在响应拦截的时候处理token是否过时，过期时间是通过后端设置的，前端需要判断token的状态码是否过时就行 import axios from 'axios' import { Loading ,Message} from 'element-ui' //引入了element-ui框架库 import router from './router/index.js' let loading; function startLoading() { loading =Loading