【项目问题】Vue2和Vue3如何使用Pinia？数据持久化？防止storage被篡改？

Pinia

Pinia 官方文档

Pinia 中文文档

Vue2中的使用

第一步：引入 Pinia

npm install pinia

第二步：在main.ts中全局引入

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // other options...
  pinia,
})

第三步：创建store.js 文件

state

//store.js
import { defineStore } from 'pinia'

const useStore = defineStore('counterStore', {
    state: () => {
        return {
            counter: 0,
        }
    },
})

export default useStore;

<!--xx.vue-->
<template>
  <div>当前count的值：{{ counter }}</div>
</template>
<script>
import { mapState } from 'pinia'
import useCounterStore from '@/store'

export default {
  computed: {
    ...mapState(useCounterStore, ['counter'])
  },
}
</script>

getters

//store.js
import { defineStore } from 'pinia'

const useStore = defineStore('counterStore', {
    state: () => {
        return {
            counter: 2,
        }
    },
    getters: {
        doubleCounter(state) {
            return state.counter * 2
        }
    }
})

export default useStore;

<!--xx.vue-->
<template>
  <div>当前count的值：{{ doubleCounter }}</div>
</template>
<script>
import { mapState } from 'pinia'
import useCounterStore from '@/store'

export default {
  computed: {
    ...mapState(useCounterStore, ['doubleCounter'])
  },
}
</script>

actions

//store.js
import { defineStore } from 'pinia'

const useStore = defineStore('counterStore', {
    state: () => {
        return {
            counter: 1,
        }
    },
    getters: {
        doubleCounter(state) {
            return state.counter * 2
        }
    },
    actions: {
        increment() {
            this.counter++
        },
    }
})

export default useStore;

<!--xx.vue-->
<template>
  <div>当前count的值：{{ counter }}
    <button @click="increment">+1</button>
  </div>
</template>
<script>
import { mapActions, mapState } from 'pinia'
import useCounterStore from '@/store'

export default {
  computed: {
    //store中的state和getters
    ...mapState(useCounterStore, ['counter'])
  },
  methods: {
    //store中的actions
    ...mapActions(useCounterStore, ['increment'])
  }
}
</script>

Vue3中的使用

第一步：引入 Pinia

npm install pinia

第二步：在main.ts中全局引入

//main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia).mount('#app')

第三步：创建store.ts文件

state

//store.ts
import { defineStore } from 'pinia' //引入 defineStore 定义仓库

export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 0 }),//定义要进行存储的数据
})

<!--xx.vue-->
<template>
    <div>当前count的值：{{ store.count }}</div>
</template>

<script setup>
import { useCounterStore } from '../store'
const store = useCounterStore();
</script>

getters

//store.ts
import { defineStore } from 'pinia' //引入 defineStore 定义仓库

export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 2 }),//定义要进行存储的数据
    getters: {
        doubleCount: (state) => state.count * 2,
    }
})

<!--xx.vue-->
<template>
    <div>当前count的值：{{ store.doubleCount }}</div>
</template>

<script setup>
import {useCounterStore} from '../store'
const store = useCounterStore()
</script>

actions

<!--xx.vue-->
<template>
    <div>当前count的值：{{ store.count }}
        <button @click="store.increment()">+1</button>
    </div>
</template>

<script setup>
import { useCounterStore } from '../store'
const store = useCounterStore()
</script>

//store.ts
import { defineStore } from 'pinia' //引入 defineStore 定义仓库

export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 2 }),//定义要进行存储的数据
    actions: {
        increment() {
            this.count++
        },
    }
})

数据持久化(pinia-plugin-persist)

第一步：install pinia-plugin-persist

npm i pinia-plugin-persist --save

第二步：引入 pinia-plugin-persist

//main.js
import Vue from 'vue'
import App from './App.vue'
import { createPinia, PiniaVuePlugin } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()
pinia.use(piniaPluginPersist)

window.vm = new Vue({
  render: h => h(App),
  pinia
}).$mount('#app')

第三步：设置数据缓存

import { defineStore } from 'pinia'

const useStore = defineStore('counterStore', {
    state: () => {
        return {
            counter: 1,
        }
    },
    getters: {
        doubleCounter(state) {
            return state.counter * 2
        }
    },
    actions: {
        increment() {
            this.counter++
        },
    },
    persist: {
        enabled: true,//开始数据缓存
        strategies: [
            {
                storage: localStorage,//默认是sessionStorage
                paths: ['counter'],//指定需要持久化存储的数据
            }
        ]
    }
})

export default useStore;

这样每次页面刷新的时候都不会把数据进行重置了！！！

开发者模式下localStorage或者SessionStorage被篡改怎么办？

在main文件中进行监听storage的监听，发生变化后用旧值进行替换

//防止localStorage被篡改
window.addEventListener('storage', e => {
  localStorage.setItem(e.key, e.oldValue)
})

//防止sessionStorage被篡改
window.addEventListener('storage', e => {
  sessionStorage.setItem(e.key, e.oldValue)
})