1. Vuex data persistence
Vuex solves the problem of data sharing between multiple views. But there is a new problem in the application process, which is that Vuex's state storage cannot be persistent. In other words, when you store the data in the store in Vuex, the data will be lost as soon as the page is refreshed.
Introduce the vuex-persist plugin, which is a plugin born for Vuex persistent storage. You do not need to manually access storage, but directly save the state to cookie or localStorage. (True fragrance) The specific usage is as follows
:
npm install --save vuex-persist
Introduce:
import VuexPersistence from 'vuex-persist'
Introduce into the vuex plugin:
const store = new Vuex.Store({
state: {
... },
mutations: {
... },
actions: {
... },
plugins: [vuexLocal.plugin]
})
The detailed link reference is as follows:
https://www.npmjs.com/package/vuex-persistedstate
Two, Vant plug-in sass style penetration
Scoped CSS
when
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
Conversion result:
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
Mix local and global styles.
You can use both scoped and non-scoped styles in a component
<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>
The root element of the child component
After using scoped, the style of the parent component will not penetrate into the child component. However, the root node of a child component will be affected by both the scoped CSS of its parent component and the scoped CSS of the child component. This design is to allow the parent component to adjust the style of the root element of its child components from the perspective of layout.
#Depth effect selector
If you want a selector in the scoped style to act "deeper", for example to affect subcomponents, you can use operators:
<style scoped>
.a >>> .b {
/* ... */ }
</style>
The above code compiles:
.a[data-v-f3f3eg9] .b {
/* ... */ }
Dynamically generated content
The DOM content created by v-html is not affected by scoped styles, but you can still style them through the deep use of selectors.