vue2.0+vuex+localStorage代办事项应用实现详解
vue2.0+vuex+localStorage 待办事项源码:https://github.com/Mynameisfwk/vue-Todo-list
参考代码:https://github.com/Mynameisfwk/vivo-shop
代码预览
vuex官方文档 https://vuex.vuejs.org/ 我觉的官方文档说明很详细
localStorage 用来本地储存数据
const state={ home:localStorage["home"]?JSON.parse(localStorage["home"]): [], item:localStorage["item"]?JSON.parse(localStorage["item"]): [], } export default state
const mutations={ [types.SET_SHIXIANG](state,data){ state.home.push(data) localStorage.setItem("home",JSON.stringify(state.home)); }, [types.SET_YES](state,data){ state.item.push(data) localStorage.setItem("item",JSON.stringify(state.item)); } } export default mutations
const actions={ setOrder ({commit}, data) { commit('SET_SHIXIANG', data); }, setYes({commit},data){ commit('SET_YES',data) } } export default actions
项目截图
项目运行
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
相关推荐
-
详解vuex结合localstorage动态监听storage的变化
需求:不同组件间共用同一数据,当一个组件将数据发生变化时,其他组件也可以响应该变化. 分析:vue无法监听localstorage的变化.localstorage主要用于不同页面间传值,vue适合组件间传值.对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据(vuex在页面刷新的时候存储的值会丢失,localstorage存储在本地浏览器中),可以采用vuex+localstorage的方式. 关于vuex和storage的区别 1.最重要的区别:vuex存储在内存,locals
-
基于vue2.0+vuex+localStorage开发的本地记事本示例
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端. 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完成(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据 支持筛选事件 支持编辑事件 支持删除事件 支持清空所有事件
-
使用vuex存储用户信息到localStorage的实例
1.首先需要装vuex npm install vuex -d 2.新建store文件夹,新建index.js, 并引入vue.vuex,代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new Vuex.Store({ state () { return { user: null } }, getters: { getStorage: functi
-
Vue项目使用localStorage+Vuex保存用户登录信息
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults.baseURL = baseURL // 登录请求 const loginCheck = params => { return axios.post('/login', params).then(
-
vue2.0+vuex+localStorage代办事项应用实现详解
vue2.0+vuex+localStorage 待办事项源码:https://github.com/Mynameisfwk/vue-Todo-list 参考代码:https://github.com/Mynameisfwk/vivo-shop 代码预览 vuex官方文档 https://vuex.vuejs.org/ 我觉的官方文档说明很详细 localStorage 用来本地储存数据 const state={ home:localStorage["home"]?JSON.pars
-
vue1.0和vue2.0的watch监听事件写法详解
如下所示: watch: { aaa: { handler: function (newVal,oldVal) { console.log('当前的值:'+ newVal); console.log('旧的值' + oldVal); }, deep: true //深度监听 } } 以上这篇vue1.0和vue2.0的watch监听事件写法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
基于vue2.0+vuex的日期选择组件功能实现
calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用 目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--
-
vue2中引用及使用 better-scroll的方法详解
使用时有三个要点: 一:html部分 <div class="example" ref="divScroll"> <div> <p>内容1</p> <p>内容2</p> <ul> <li>list1</li> <li>list2</li> <ul> </div> </div> [注] 1.最外层加re
-
对vuex中getters计算过滤操作详解
getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样,实际上它们是有区别的: getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现,而且getters它是不需要什么点击,它就存在,只要你写了,这是什么意思,就是说假设你百度钱包为0,你存在了getter它就有100元,而你如果写许多百度经验,百度再次发红包0.5元时它就是100+0.5
-
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的
-
Vue+Vuex实现自动登录的知识点详解
在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面.但其实有好几个问题并没有解决: 一.我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization 二.我们重新进入的时候,判断条件是只要有Authorization就可以直接进入了,但其实应该提交给服务器判断这个A
-
Vue3中Vuex状态管理学习实战示例详解
目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.
-
vue2从template到render模板编译入口详解
目录 正文 1.template:模板获取 2.createCompiler:核心参数 3.createCompileToFunctionFn:缓存处理 4.compile:参数合并 小结 正文 在vue的渲染过程中,渲染核心逻辑是vm._update(vm._render(), hydrating),通过vm._render的执行获取到vNode,再通过vm._update的执行来将vNode渲染成真实视图. 其中,render函数的来源是: (1)用户手写: (2)通过vue-loader引
随机推荐
- AngularJS 使用 UI Router 实现表单向导
- 如何去掉文章里的 html 语法
- PHP中的mongodb group操作实例
- js实现随机数字字母验证码
- 防御SQL注入攻击时需要注意的一个问题
- Python 面向对象 成员的访问约束
- PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
- Android Service 服务不被杀死的妙招
- ThinkPHP开发--使用七牛云储存
- 在Windows中安装Apache2和PHP4的权威指南
- Android开发之完全隐藏软键盘的方法
- node.js中的buffer.Buffer.isEncoding方法使用说明
- 学习JavaScript设计模式(单例模式)
- php文件服务实现虚拟挂载其他目录示例
- PHP加密解密函数详解
- linux禁止ping的实现实例
- jquery+html仿翻页相册功能
- Dom元素变换效果(工具函数)
- C#自定义基于控制台的Timer实例
- Android模拟强制下线通知功能实例代码