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

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 当 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：

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