前语

Pinia是尤雨溪强烈推荐的一款Vue状况管理工具，也被认为是下一代Vuex的代替产品。

长处

  • 去除了mutations，只要 state，getters和actions，其中actions支撑了同步和异步操作
  • 不会像Vuex那样有模块嵌套，Pinia只要store的概念，store之间能够彼此运用，互不影响，到达模块扁平化的作用
  • 更好地支撑ts
  • 更好地支撑Vue2/Vue3
  • 逻辑愈加清晰，开发起来愈加简单

装置

npm i pinia

创立并挂载

1.在src目录下新建store目录并在其下面创立index.js文件，代码如下：

import { createPinia } from 'pinia'
const store = createPinia()
export default store

2.在main.js中引进store并挂载，代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'
createApp(App)
.use(store)
.mount('#app')

创立store

在src/store文件夹下创立一个js文件，命名按照需求即可，我这边定义为main.js，代码如下：

import { defineStore } from 'pinia'
export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },
    actions: {},
    getters: {}
})

其中defineStore的第一个参数为该store的称号，第二个参数为一个目标，包含了该store的state,getters和actions，state改为了函数形式，意图应该是像Vue2 options API中的data相似，防止多个store中定义的特点彼此受到影响。

运用store

此处运用Vue3的SFC语法，主要是Pinia更适合Vue3这种组合式API风格，便利演示

回显与修正state

<script lang="ts" setup>
    import { mainStore } from '../store/main'
    import { storeToRefs } from 'pinia'
    const store = mainStore()
    const { count } = storeToRefs(store)
    // 单条数据直接修正
    const handleAddCount = () => {
        store.count++
    }
</script>
<template>
    <div>
        <p>{{ store.msg }}</p>
        <p>{{ count }}</p>
        <button @click="handleAddCount">+</button>
    </div>
</template>
  1. 运用办法与Vuex根本相似，要运用哪个store，就直接进行引进，十分便利，没那么多层级引证
  2. 其中，咱们运用了Pinia中的storeToRefs办法，此办法能够直接解构出该store的state中的某个值，并且是呼应式的；假如咱们直接从state上解构，那么解构出的值就不是呼应式的了。
  3. 假如咱们要修正state中的值，不能直接去修正解构出的值，得去修正state上对应的特点

运用$patch对多条数据直接修正

运用$patch的办法对数据进行修正，能够加速修正速度，功能更好。$patch办法能够接受两种类型的参数，目标型和回调函数型。

$patch + 目标

$patch + 函数 注：运用回调函数型时，回调接纳一个state参数，state指代的便是对应store中的state

运用办法如下：

<script lang="ts" setup>
    import { mainStore } from '../store/main'
    import { storeToRefs } from 'pinia'
    const store = mainStore()
    const { count } = storeToRefs(store)
    // 运用$patch + 目标
    const updateWithObj = () => {
        store.$patch({
            msg: store.msg === 'hello' ? 'hello world' : 'hello',
            count: store.count + 2
        })
    }
    // 运用$patch + 回调
    const updateWithFun = () => {
        store.$patch((state) => {
            state.msg = state.msg === 'hello' ? 'hello world' : 'hello'
            state.count = state.count + 3
        })
    }
</script>
<template>
    <div>
        <p>{{ store.msg }}</p>
        <p>{{ count }}</p>
        <button @click="updateWithObj">$patch+目标</button>
        <button @click="updateWithFun">$patch+回调</button>
    </div>
</template>

运用actions

1.在src/store/main.js的actions目标中，添加一个办法，代码如下：

import { defineStore } from 'pinia'
export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },
    actions: {
        changeState() {
            this.count++
            this.msg = this.msg === 'hello' ? 'hello world' : 'hello'
        }
    },
    getters: {}
})

2.运用办法为：store.办法名，代码如下：

<script lang="ts" setup>
    import { mainStore } from '../store/main'
    import { storeToRefs } from 'pinia'
    const store = mainStore()
    const { count } = storeToRefs(store)
   // 运用action修正数据
    const onActionClick = () => {
        store.changeState()
    }
</script>
<template>
    <div>
        <p>{{ store.msg }}</p>
        <p>{{ count }}</p>
        <button @click="onActionClick">运用action</button>
    </div>
</template>

运用getters

Pinia中的getter和Vue中的核算特点相似，在获取state之前会进行处理，具有缓存性，假如值没有改动，即便多次调用，实际上也只会调用一次。

1.在src/store/main.js的getters目标中进行添加，代码如下：

import { defineStore } from 'pinia'
export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },
    getters: {
        getState(state) {
            console.log('getState被调用了');
            // getter 中不仅能够传递state直接改动数据，也能够运用this来改动数据
            return `${state.msg} + ${this.count}`
        }
    }
})

2.运用办法如下：

<script lang="ts" setup>
    import { mainStore } from '../store/main'
    const store = mainStore()
</script>
<template>
    <div>
        <p>运用getter获取数据：{{ store.getState }}</p>
        <p>运用getter获取数据：{{ store.getState }}</p>
        <p>运用getter获取数据：{{ store.getState }}</p>
    </div>
</template>

咱们能够看到，即便执行了三遍相同的代码，但终究仍是只调用了一次。

Vue新一代状态管理工具——Pinia

多个store彼此调用

在Pinia中，能够在一个store中import引进另外一个store，然后经过调用引进的store办法的形式，获取引进的store的状况。

1.在src/store目录下，新建一个文件.js，代码如下：

import { defineStore } from 'pinia'
export const userStore = defineStore('user', {
    state: () => {
        return {
            name: '吴同学'
        }
    }
})

2.在需求用到的store中进行引进，并经过getters的办法获取，代码如下：

import { defineStore } from 'pinia'
import { userStore } from './user'
export const mainStore = defineStore('main', {
    getters: {
        getUserState() {
            return userStore().name
        }
    }
})

数据耐久化

Pinia与Vuex相同，改写页面后，数据就会重置，有时候咱们需求将数据进行耐久化存储，咱们能够运用pinia-plugin-persist这个插件

装置

npm i pinia-plugin-persist –save

运用

1.在src/store/index.js文件夹下，引进并运用，代码如下：

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

2.在对应的store里敞开耐久化存储

import { defineStore } from 'pinia'
import { userStore } from './user'
export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },
    // 敞开数据缓存
    persist: {
        enabled: true
    }
})

更新数据以后，咱们就能在浏览器控制台中看到现已将数据存储到了sessionStorage中

Vue新一代状态管理工具——Pinia

数据默认是存在sessionStorage中的，还会以store的称号作为key。可是咱们能够对其修正，并且还能够只耐久化部分state中的特点，代码如下：

import { defineStore } from 'pinia'
import { userStore } from './user'
export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },
    // 敞开数据缓存
    persist: {
        enabled: true,
        strategies: [
            {
              key: 'mainStore', // 修正存在缓存中的key值
              storage: localStorage,    // 修正存储办法为localStorage
              paths:['msg']  // 只耐久化msg，此刻改写页面msg数据会被保留，其他state将会重置
            }
        ]
    }
})

Vue新一代状态管理工具——Pinia

总结

Pinia便是Vuex的代替产品，比较于Vuex，Pinia更好地兼容了Vue自身，代码愈加简练，开发起来也愈加快捷。以上便是关于Pinia的介绍，假如觉得对你有协助，就请点个赞，谢谢我们！