一、Vuex数据持久化
Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是,Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据,只要一刷新页面,数据就丢失了。
引入vuex-persist 插件,它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中。(真香)具体用法如下
安装指令:
npm install --save vuex-persist
引入:
import VuexPersistence from 'vuex-persist'
引入进vuex插件:
const store = new Vuex.Store({
state: { ... },
mutations: { ... },
actions: { ... },
plugins: [vuexLocal.plugin]
})
详细链接参考如下:
https://www.npmjs.com/package/vuex-persistedstate
二、Vant插件sass样式穿透
Scoped CSS
当
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
转换结果:
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
混用本地和全局样式
你可以在一个组件中同时使用有 scoped 和非 scoped 样式
<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>
子组件的根元素
使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
#深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 操作符:
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码编译:
.a[data-v-f3f3eg9] .b { /* ... */ }
动态生成的内容
通过 v-html 创建的 DOM 内容不受 scoped 样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式。