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,
})
1
2
3
4
5
6
7
8
9
10

第三步：创建store.js 文件

state

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

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

export default useStore;
1
2
3
4
5
6
7
8
9
10
11
12

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

export default {
  computed: {
    ...mapState(useCounterStore, ['counter'])
  },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

export default {
  computed: {
    ...mapState(useCounterStore, ['doubleCounter'])
  },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<template>
  <div>当前count的值：{{ counter }}
    <button @click="increment">+1button>
  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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---

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')
1
2
3
4
5
6
7
8
9

第三步：创建store.ts文件

state

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

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

<template>
    <div>当前count的值：{{ store.count }}div>
template>

<script setup>
import { useCounterStore } from '../store'
const store = useCounterStore();
script>
1
2
3
4
5
6
7
8
9

---

getters

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

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

<template>
    <div>当前count的值：{{ store.doubleCount }}div>
template>

<script setup>
import {useCounterStore} from '../store'
const store = useCounterStore()
script>
1
2
3
4
5
6
7
8
9

---

actions

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

<script setup>
import { useCounterStore } from '../store'
const store = useCounterStore()
script>
1
2
3
4
5
6
7
8
9
10
11

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

export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 2 }),//定义要进行存储的数据
    actions: {
        increment() {
            this.count++
        },
    }
})
1
2
3
4
5
6
7
8
9
10
11

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

第一步：install pinia-plugin-persist

npm i pinia-plugin-persist --save
1

第二步：引入 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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第三步：设置数据缓存

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

开发者模式下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)
})
1
2
3
4
5
6
7
8
9