Vuex数据持久化与Vant插件sass样式穿透

一、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 样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式。