Pinia的使用

一、Pinia VS Vuex

pinia支持选项式api和组合式api写法
pinia没有mutations，只有：state、getters、actions
可以直接修改state中的数据，而不是需要mutations进行提交
pinia分模块不需要modules（之前vuex分模块需要modules）
pinia对TypeScript支持很好
自动化代码拆分
pinia体积更小（性能更好）

二、pinia的使用

安装

yarn add pinia
# or with npm
npm install pinia

新建store/index.js作为入口文件

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

main.js引入

import store from './store/index.js'

新建模块文件user.js

import { defineStore } from 'pinia'

export const useStore = defineStore('user', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{},
  actions:{}
})

组件中使用

区别

vuex是import { useStore } from 'vuex'
pinia是import { useStore } from '../store'

<template></template>
<script setup>
import { useStore } from '../store/user.js'
const store = useStore();
</script>

三、state

使用数据

<template>
    <div>
        <h1>A组件</h1>
        {{ name }}
    </div>
</template>

<script setup>
import { useStore } from '../store'
const store = useStore();
// 将store中的内容进行解构
let { name } = store;
</script>

修改数据

pinia可以直接修改state中的数据，但是必须通过提供的API解构成响应式数据

<template>
    <div>
        <h1>A组件</h1>
        {{ name }}
        <button @click='btn'>按钮</button>
    </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();

// 注意：响应式数据
let { name }  = storeToRefs(store)

const btn = ()=>{
  // 单个更新
    name.value = '123';
}
</script>

批量更新state中的数据也可以使用API| 使用$patch进行批量更新

...
const btn = ()=>{
    //批量更新
    store.$patch(state=>{
        state.counter++;
        state.arr.push(4);
        state.name = '456';
    })
}
...

四、getters

getters和vuex的getters几乎类似，也是有缓存的机制

<template>
    <div>
        {{ counterPar }}
        {{ counterPar }}
        {{ counterPar }}
    </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counterPar }  = storeToRefs(store);
</script>

五、actions

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0
    }
  },
  getters:{},
  actions:{
    changeCounter( val ){
        this.counter += val;
    }
  }
})

<template>
    <div>
        <h1>A组件</h1>
        {{ counter }}
        <button @click='add'>加10</button>
    </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter }  = storeToRefs(store);
const add = ()=>{
    store.changeCounter(10);
}
</script>

六、模块化

划分user.js模块，不需要modules，直接通过文件命名来划分模块

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

export const user = defineStore({
  // 这里就是模块id
  id: 'user',
  state:()=>{
    return {}
  },
  getters:{},
  actions:{}
})

// 或者另一种写法
export const user = defineStore('user',{
  state:()=>{
    return {}
  },
  getters:{},
  actions:{}
})

组件中使用

<template>
    <div>
        <h1>A组件</h1>
        {{ userInfo }}
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
// 导入对应的模块就可以使用
import { user } from '../store/user'
const store = user();
let { userInfo } = storeToRefs(store);
</script>

七、持久化存储

下载pinia-plugin-persist插件

npm i pinia-plugin-persist -S

在入口文件中配置插件

import { createPinia } from 'pinia'
// 引入插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
// 使用插件
store.use(piniaPluginPersist)
export default store

在模块文件中开启插件

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

export const user = defineStore({
  id: 'user',
  state:()=>{
    return {}
  },
  getters: {},
  actions: {},
  // 开启数据缓存
  persist: {
    enabled: true,
    // 配置key和持久化存储的方式，默认sessionStorage
    strategies: [
      {
        key: 'my_user',
        storage: localStorage,
      }
    ]
  }
})

局部持久化

默认所有 state 都会进行缓存，通过 paths 指定需要长久化的字段，默认全部

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      // paths配置
      paths: ['name', 'age']
    }
  ]
}