localStorage的使用和vuex的拆分
问题1:在隐身模式、或者用户未启用的情况下,使用localStorage可能会导致浏览器直接报错,怎么办?
方法:使用try-catch包裹
代码示例:
store.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) let defaultCity = '汉中'
try {
if (localStorage.city) {
defaultCity = localStorage.city
}
} catch (e) {} export default new Vuex.Store({
state: {
city: defaultCity
},
mutations: {
changeCity (state, city) {
state.city = city
try {
localStorage.city = city
} catch (e) {}
}
},
actions: {
changeCity (ctx, city) {
// ctx为上下文,city是传来的参数
ctx.commit('changeCity', city)
}
}
})
问题2:当vuex的store.js变得复杂起来时,代码看着会很庞大
方法:将state、mutations、actions拆分出去
代码示例:
创建state.js
let defaultCity = '汉中'
try {
if (localStorage.city) {
defaultCity = localStorage.city
}
} catch (e) {} export default {
city: defaultCity
}
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
Vue.use(Vuex)
export default new Vuex.Store({
state: state, //键名键值相同,还可以简化
mutations: {
changeCity (state, city) {
state.city = city
try {
localStorage.city = city
} catch (e) {}
}
},
actions: {
changeCity (ctx, city) {
// ctx为上下文,city是传来的参数
ctx.commit('changeCity', city)
}
}
})
同样可以创建mutations.js、actions.js
localStorage的使用和vuex的拆分的更多相关文章
- 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载
目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...
- vuex知识笔记,及与localStorage和sessionStorage的区别
菜单快捷导航 Vuex是什么东东,有什么应用场景?localStorage和sessionStorage能否替代它? Vuex知识点State.Getter.Mutaion.Action Vuex模块 ...
- vue2 — vuex状态管理
一.为什么使用vuex : https://www.cnblogs.com/goloving/p/9080005.html vuex的功能 和 localstorage 的作用是一样,把数据在一个所有 ...
- part7 vuex实现数据共享
vuex 是数据框架(一个插件)(单项数据的改变流程,组件改数据必须先调Action用dispatch方法) 大型项目vue只能承担视图层的主要内容 大量数据传递的时候,往往需要一个数据框架辅助 例子 ...
- Vuex数据可视化
参考:https://gitee.com/hjm100/codes/46towe9v28a1bxfqhc7kl34 Vuex虽然能存储数据,但是一刷新就没有了,如果要实现数据持久化,就需要用vuex- ...
- vue-persist 为 vuex 持久化!!
npm install --save vuex-persist import VuexPersistence from 'vuex-persist' const vuexLocal = new Vue ...
- 客户端本地存储(cookie、web Storage、vuex)选择
一.cookie .localStorage .sessionStorage .vuex 比较 cookie 4K 有时效性 可服务器传递 cookie是由服务器产生,存储在客户端的一 ...
- 本地存储和vuex使用对比
1. sessionStorage sessionStorage 方法针对一个 session 进行数据存储.当用户关闭浏览器窗口后,数据会被删除. 用法: 储存: 1. 点(.)运算符 ...
- Javascript - Vue - vuex
vuex 这是一个与vue配套的公共数据管理工具,可以将一些需要共享的数据保存到vuex中,以此方便项目中的任何组件都可以从vuex中得到共享数据.cnpm i vuex -S 装包 读取数据 //在 ...
随机推荐
- Java数据结构之排序---插入排序
插入排序的基本介绍: 插入排序是对想要排序的序列以插入的方式寻找该元素的适当的位置,从而达到排序的目的. 插入排序的基本思想: 把n个待排序的元素看成一个有序表和一个无序表,开始时,有序表只有一个元素 ...
- [BZOJ1718]:[Usaco2006 Jan] Redundant Paths 分离的路径(塔尖)
题目传送门 题目描述 为了从F个草场中的一个走到另一个,贝茜和她的同伴们有时不得不路过一些她们讨厌的可怕的树.奶牛们已经厌倦了被迫走某一条路,所以她们想建一些新路,使每一对草场之间都会至少有两条相互分 ...
- Canvas 实现钟表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JAVA周二学习总结
第一周我感觉我学到了不少东西,其中有上学期C语言学的不好的原因,因为不想再挂科就有认真的在听. 学到的东西有JAVA的基本书写模式自己懂了,还在课堂上弄会了交换数据的方法,还有运算的算法,另外还有数据 ...
- jquery.fileupload-image-editor.js
jquery.fileupload-image-editor.js中 _initEventHandlers: function () { this._super(); var handlers = { ...
- leetcode-easy-array-217. Contains Duplicate
mycode 76.39% class Solution(object): def containsDuplicate(self, nums): """ :type n ...
- pyhton2与pyhton3切换
ubuntu中默认的Python版本是Python2.X,但是现在Python的最新版本是Python3.X. 那么怎么修改ubutun系统默认的Python解释器呢? 如果没有安装,则使用以下命令安 ...
- HTTP学习记录:二、请求方法
学习资源主要为:@小坦克HTTP相关博客 最基础的是4种,GET.POST.PUT.DELETE对应着对资源的查.改.增.删.最常用的是GET和POST. GET一般用于获取/查询资源信息: POST ...
- PHP操作SESSION
说一下在PHP里面怎么简单的操作SESSION 操作SESSION流程 <?php session_start(); //开启session $_SESSION['user']='admin'; ...
- linux/linux学习笔记-vim文本编辑器(mooc)
vim文本编辑器 vim与vi的区别:( vim=vi +IMproved) VIM是一个Unix以及类unix文本编辑器 特点:功能强大,高度可定制 vim编辑器的三种模式:一般模式.编辑模式和命令 ...