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

最新回复(0)
/jishuLB57G_2BPs_2B9glRHc2YBKUQoEsHjqUbQq4W7QGXQ_3D_3D4488212
8