Vuex data persistence

Vuex solves the problem of data sharing between multiple views. However, a new problem is that Vuex state storage is not persistent. This means that when you store data in Vuex, the data is lost every time you refresh the page.

Introduce the vuex-Persist plug-in, which is a plug-in for vuex persistent storage. You do not need to manually access the storage, but directly save the state to a cookie or localStorage. The specific usage is as follows installation instructions:

npm install --save vuex-persist
Copy the code

Introduction:

import VuexPersistence from 'vuex-persist'
Copy the code

Introducing the vuex plugin:

const store = new Vuex.Store({
  state: {... },mutations: {... },actions: {... },plugins: [vuexLocal.plugin]
})
Copy the code

Details refer to the following link: www.npmjs.com/package/vue…

Second, Vant plugin sass style penetration

Scoped CSS When a tag has a Scoped property, its CSS applies only to the elements in the current component. This is similar to style encapsulation in Shadow DOM. It has a few caveats, but doesn’t require any polyfills. It implements the following transformations using PostCSS:

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>
Copy the code

Conversion result:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>
Copy the code

Mixing local and global styles You can use both scoped and non-scoped styles in one component

<style>
/* Global style */
</style>

<style scoped>
/* Local style */
</style>
Copy the code

When scoped is used on the root element of the child component, the parent component’s style will not permeate into the child component. However, the root node of a child component is affected by both its parent’s Scoped CSS and the child’s scoped CSS. This is designed so that the parent component can adjust the style of the root element of its child component from a layout perspective.

If you want one of the selectors in the scoped style to work “deeper”, such as affecting child components, you can use the operator:

<style scoped>
.a >>> .b { / *... * / }
</style>
Copy the code

The above code compiles:

.a[data-v-f3f3eg9] .b { / *... * / }
Copy the code

Dynamically generated content DOM content created using V-HTML is not affected by scoped styles, but you can still style them using the depth selector.