在vue中 storge 和vuex使用的用法区别

1.联动性：storge对于属性的改变不能触发其他页面的改动

storage：存取login之后就不会改变的信息，比如userId， isAdmin(是否是管理员)
vuex：存取login之后可能在某个组件会改变的信息，比如isInMyPort，isInPort

比如：
我在A页面改了userInfo 不经过刷新。b对他的调用并不知道最新的改动

实际运用：
在渔港项目中权限管理，每个页面显示当前港口，切换至别的港口，开放首页权限；并且关闭其他所有界面。这就是一个组件操控另外一个好远的组件，这里必须使用vuex，但是刷新当前界面，要保留当前港口信息。这一块要用storage，故需要storage和vuex结合使用；

location.vue
1.在每次刷新的时候从storage取出信息
2.切换港口的时候提交mutation并且更新storage
cache/UserInfo.vue
存取用户所有信息

code

storage:
{//用户信息接口返回的信息createTime: "2019-05-07 17:45:51"createUserId: 1email: "1@1.com"userId: 1userType: 3username: "admin"mobile: "11111111111"orgId: "0"orgName: "深圳"password: "xxx"realName: "超级管理员"roleIdList: nullsalt: "xxx"status: 1// 系统里面根据需要‘计算’出的信息isAdmin: trueisInMyPort: trueisInPort: truecurrentOrg: {title: "蛇口渔港", id: 1001, parentId: 100, orgType: 2, mainOrg: 0, orgName: "蛇口渔港", waterArea: "29万㎡",…}orgList: [,…]
}vuex:
const state = {//是否在自己的港口isInMyPort: true,//当前用户 是在港口 还是在深圳海域isInPort: true
}

在vue中 storge 和vuex使用的用法区别相关推荐

vue中关于$emit及propos的用法
vue中关于$emit及propos的用法一:父组件可以使用propos把数据传递给子组件. 父组件:在父组件中的子组件标签中,通过父组件给子组件传递函数类型的props实现:子给父传递数据如: 子 ...
Vue中watch、computed、updated的区别
watch watch:侦听器,监听某个数据的变化然后执行相对应的方法,来响应数据的变化,尤其是当需要数据变化时执行异步操作或着开销较大时,这个方式是最有用的 <div id="wat ...
vue中关于$emit和.sync的用法
父组件可以使用props 把数据传给子组件. 子组件可以使用 $emit触发父组件的自定义事件而vue中对$emit的定义如下: 触发当前实例上的事件.附加参数都会传给监听器回调. vm.$emit ...
java removeat,在c#中 RemoveAt、 Remove、delete用法区别
有三种方法可以删除 DataTable 中的 DataRow: Delete 方法和 Remove 方法和 RemoveAt 方法其区别是: Delete 方法实际上不是从 DataTable 中删 ...
Vue中状态管理——Vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({// sta ...
Vue中的export和export default{}用法
目录一.export 的使用二.export default 的使用三.两者之间的区别区别 1: 区别 2: 区别 3: 在JavaScript ES6中,export 与 export d ...
vue中$emit跟$on,$off跟用法
首先新建一个js文件转为两个vue文件的桥梁 bus.js文件注意: 子组件的跟父子间都要引入这个文件(文件中写了注释) import Vue from "vue" export ...
vue中slot,slot-scope,v-slot的用法和区别
以下仅为个人理解,若有不妥请留言评论区 v-slot 指令自 Vue 2.6.0 起被引入,在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持,但已经被 ...
vue中computed、metfods、watch的区别
一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...

在vue中 storge 和vuex使用的用法区别

在vue中 storge 和vuex使用的用法区别

在vue中 storge 和vuex使用的用法区别相关推荐

最新文章

热门文章