vuex store:数据存储是响应式的;数据放在内存里;生命周期是每次刷新会初始化
- 个人理解就是store中的数据在发生改变后都会同步到所有使用的组件中;
- 比如:如果页面渲染有依赖这些数据,则会出发重新渲染
- 缺点:刷新则会初始化
vuex官方文档
sessionStorage:会话缓存;存在浏览器里,生命周期是本窗口(一个标签页)
- sessionStorage仅对当前标签页有效(tab),当打开新的标签页对应的是新标签页的缓存;
- 关闭tab缓存清空
- 如果希望对同一浏览器共用一个缓存可选择localStorage
localStorage:本地缓存;存在浏览器,生命周期是永久(未手动清空)
- localStorage对当前浏览器所有tab共用一个缓存,关闭浏览器不会清缓存只能手动清除
用法:
vuex-store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// new store对象
const store = new Vuex.Store({
// state 是用来存储数据的
state: {
login: 0,
userName: '',
},
// 用于数据状态变更, 在使用store时 通过提交mutation中的方法来进行数据状态变更
m