vuex

在web页面实现类似于浏览器的页签功能，使用vue的keep-alive组件做缓存 基本实现如下： 1.将需要做缓存的视图用keep-alive包裹 < keep-alive :include ="keepAliveComponents" > < router-view ></ router-view > </ keep-alive > 2.视图通过路由配置。需要缓存的组件在meta的keepAlive设为true,注意需要设置name const routes = [ { path: "/talentPool" , component: TalentPool, name: 'TalentPool' , meta: { keepAlive: true , title: "人才池" , pageCode: "TalentPool" } } ]; 3.如果需要动态更改缓存组件的，即有的情景下需要缓存，有的情景下不需要缓存，则需要做一个动态数组去控制 分别在路由跳转前和跳转后做处理，这里使用了vuex，需要缓存的组件名数组存在store里（注意是存的是组件名，keep-alive的include方式识别的是组件名） router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) {

　　页面应用需要Vuex管理全局/模块的状态，大型单页面组件如果靠事件（events）/属性（props）通讯传值会把各个组件耦合在一起。因 此需要Vuex统一管理，当然如是小型单页面应用，引用Vuex反而会增加复杂度。因此需要衡量引用Vuex增加的收益是否大于成本。 快速入门 1. 安装vuex库 cnpm install -S vuex 2. 创建Vuex.Store import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const store = new Vuex.Store({ // 组件数据源，单一的state属性 state: { clickCount: 0 }, // 相当于属性，封装获取state getters: { getClickCount: state => { return state.clickCount; } }, // 封装引起状态变化的方法 mutations: { increment(state) { state.clickCount ++ ; } }, // 类似于 mutation，不同在于actions支持异步，不是直接变更状态，而是提交到mutation actions: { increment(context) { context.commit( 'increment'

在小程序中，保持登录状态是很常见的需求，今天就把写一写使用uni-app框架的保持登录状态功能是怎样实现的。 一、场景需求 1、场景：初始打开---登陆---关闭，再次打开---（已登录）上次关闭前的页面 2、cookie：传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态，但是uni-app不支持对cookie的读写。 3、实现：uni-app 的官网的API 有这样一栏“数据缓存”，而且uni-app框架的主体是 VUE，那么我们就用 uni.setStorage 和 vuex 进行登录状态管理。 二、实现过程 1、vuex的声明和使用 请看 《 uni-app 使用Vuex+ （强制）登录 》 2、在store/index.js 中 3、在App.vue 　　每次进入应用前，由App.vue 中的周期函数进行监听，所以在加载函数中定义方法，从本地缓存中取出用户数据，然后调用login方法，不需要发起网络登录请求。 这样就实现了，只有不清除本地缓存，每次打开小程序应用时，都是登录状态 三、总结 看到文档，有同步和异步这两种缓存数据，那么关于同步缓存和异步缓存的区别： 以Sync结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。 通俗点说,同步就是你下步操作需要上一步必须完成才能往下执行

B站 该教学视频资源 =》 传送门 李游Leo 老师的公开课 做的笔记 安装 npm 参考手顺 安装结果 安装cnpm手顺 clone 下来 vue创造者的 demo版本 gihub地址 ： 传送门 依据 package.json 文件 ，cnpm i 下载 依赖 下记是老师的图 运行个dev Ctrl + C 停止 。。。。。。 运行个 serve 我应该 再去学学 英语 。。。。。。 => http://localhost:5000/ 使用作者提供的小例子 => https://github.com/vuejs/vue-next#status-beta here => https://github.com/vuejs/vue-next-webpack-preview 小例子 运行 vue 脚手架 （前面都是 浮云 ~~~） 安装一下 npm install -g @vue/cli vue -V 检查已经安装成功 创建项目 vue create vue-next-cli-demo （mac 是这个，但windows 并不是，没有窗口交互互动的，小坑坑~） 解决办法 1.winpty vue.cmd create 你的工程名（你滴名纸） 就和视频里面一样啦~~~ 创建工程需要一些自定义的设定 ，设定一下 。。。。。。 2.vue 2 =》 vue 3 需要升级一下 vue add

写在前面 上一讲「Vuex 旗下的 State 和 Getter」，告诉了我们怎么去使用仓库 store 中的状态数据。当然，光会用肯定还不够，大部分的应用场景还得对这些状态进行操控，那么具体如何操控呢，这就是这一讲要说的重点。 只有 mutation 能动 State 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数： const store = new Vuex.Store({ state: { count: 1 }, mutations: { // 事件类型 type 为 increment increment (state) { // 变更状态 state.count++ } } }) 注意，我们不能直接 store.mutations.increment() 来调用，Vuex 规定必须使用 store.commit 来触发对应 type 的方法： store.commit('increment') 传参 我们还可以向 store.commit 传入额外的参数： mutations: { increment

最近一直在做移动端微信公众号项目的开发，也是我首次用vue来开发移动端项目，前期积累的移动端开发经验较少。经过这个项目的锻炼，加深了对vue相关知识点的理解和运用，同时，在项目中所涉及到的微信api(微信分享，微信支付)，百度地图api(如何实例化地图，给地图添加自定义覆盖物，给地图添加自定义标注，对地图进行缩放，拖拽等)的相关使用，开阔了自己的知识眼界；现将我开发过程中积累的相关经验与大家进行分享，希望和大家一起学习和进步.... vux：Vue 移动端 UI 组件库的使用； vue-lazyload ：一个简单易用的 Vue 图片延迟加载插件； vuex：vue状态管理工具详细入门； async/await：异步神器来封装接口请求文件fetch.js vue 项目中的迭代判断技巧； vue 项目中常用的图片引入方式； 微信api在vue项目中的使用： vue2实现微信分享坑点和经验 ； vue2实现微信支付坑点和经验； 百度地图api在vue项目中的使用: vue2.0项目中如何使用百度地图api vue2如何给地图添加房源覆盖物； 如何给地图添加自定义定位控件并更换控件的图标； 如何给地图添加自定义当前位置定位标注 几个常用的api(地图缩放，拖拽，获取当前位置)等功能的实现； VUX - Vue 移动端 UI 组件库的使用； vux介绍：详细请参见 官方文档 。

加速度 转眼又到端午放假，趁着这期间再整理一篇，这个小项目不大，但是时间拖的比较久，期间浪费了不少时间，加快速度，争取早点结束掉。 ###0. 其它 vue实战（1）：准备与资料整理 vue实战（2）：初始化项目、搭建底部导航路由 vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由 vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态 vue实战（5）：总结一 vue实战（6）：异步显示数据、开发Star组件 vue实战（7）：完整开发登录页面（一） vue实战（8）：完整开发登录页面（二） vue实战（9）：总结二 vue实战（10）：开发店铺详情（一） ###1. 界面相关效果 这一部分内容，回到之前完成的 Login.vue 页面，做逻辑之前先完成一些必要的效果。 切换登录 1）设置布尔值 logingwey: true, // 短信登录为true,密码登录为false 2）设置相关 class 手机号合法检查 1）判断输入的手机号的位数 computed: { // 返回true或者false，用test（），判断是否输入了11位1开头的数字 logincode () { return /^1\d{10}$/.test(this.phone) } }, 2）判断是否可以发送验证码 <button :disabled="

接上一篇 放在一篇有点长，分第二篇 我错了！！给表演一个原地爆炸，说实话之前启动 MongoDB 有警告，本来以为影响不大，现在登录请求 post 请求不到，搞了不短时间，我决定放弃这边，再一次凸显的是不懂 MongoDB 还真不行。 当然，学习数据库与后端语言的计划在下个学习项目。 ###0. 其它 vue实战（1）：准备与资料整理 vue实战（2）：初始化项目、搭建底部导航路由 vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由 vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态 vue实战（5）：总结一 vue实战（6）：异步显示数据、开发Star组件 vue实战（7）：完整开发登录页面（一） vue实战（8）：完整开发登录页面（二） vue实战（9）：总结二 vue实战（10）：开发店铺详情（一） ###1. 动态一次性短信验证码 在 api 文件中补充完相关的接口 // [6、用户名密码登陆](#6用户名密码登陆)<br/> export const reqPwdLogin = ({ name, pwd, captcha }) => ajax(`${BASE_URL}/login_pwd`, { name, pwd, captcha }, 'POST') // [7、发送短信验证码](#7发送短信验证码)<br/>

一、前言 1、动态获取图片验证码 2、实现手机验证码登录（工具准备） 3、手机验证码登录（后台实现） 3、前台实现 二、主要内容 1、动态获取图片验证码 （1）请求的接口如下，返回的是一张svg的图片 ## 获取一次性验证码 ### 请求URL： http: // localhost:3000/captcha ### 请求方式： （2）初次显示图片，可以直接在image中的src中请求路径直接得到 <!-- 第一次显示直接请求http://localhost:4000下面的 --> <!-- 点击图片的时候要更新图片，注册一个点击事件 --> < input type ="text" maxlength ="11" placeholder ="验证码" v-model ="captche" > < img class ="get_verification" src ="http://localhost:4000/captcha" alt ="captcha" @click ='getCaptcha' > （3）点击图片的时候更新，methods中调用方法 // 获取图片验证码 getCaptcha(event){ console.log( this ) console.log(event.target) event.target.src = "http://localhost

我个人对Vue3的体验感受是非常好的，RFC讨论新API(Composition得通过需要少量的API的学习成本，或许可以得到更好的体验。再此我是保持中立的，框架的更新改版我的理解就是：解决前代被人吐槽的地方，优化性能，缩小体积，更强大的功能。在此之前，通过这次直播，我来总结下 Composition API 和 Options API 之间究竟解决了什么问题 按需引入 按照大佬的说法，Vue CompositionAPI支持按需引入，众所周知在Vue2 Options API中，它将其所有的功能都融会贯通起来，通过官方的Vue3在线编译器。可以看出，在Vue3中，会动态的去对模板引擎做一个按需引入。 如原始模板： <div> <span>hello, vue 3</span> </div> 复制代码 转换后: import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue" export function render ( _ctx, _cache ) { return (_openBlock(), _createBlock( "div" , null , [ _createVNode( "span" , null , "hello,