pinia的学习

pinia的学习

Pinia是新一代的状态管理器(搭配vue3食用更香)，也是由vuex的团队开发的，目前也是在推广pinia，有可能取代vuex

pinia特点

• 体积小
• 支持typeScript
• 去除了mutations

安装

npm i pinia -S

创建store仓库

//src/store/mainStore.js
import { defineStore } from 'pinia'
const mainStore = defineStore('mainStore', {
  state:() => ({
      count:0,
      keyWord:'helloWorld'
  }),
  getters:{
    countGetters(){
      return this.count+10
    }
  },
  actions:{
    //注意这里不能使用箭头函数，因为this指向会出问题
    changeCount(){
      this.count++
    },
  },
})
export {
  mainStore
}

引入store仓库

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

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

组件中使用以及修改store数据的方式

<script setup>
import { ref } from 'vue'
import { mainStore } from '../store/mainStore.js'
const store = mainStore()
defineProps({
  msg: String
})
const count = ref(0)

// 第一种方式：一次只能改变单个数据
const handleClick = () => {
  store.count++
}
// 第二种方式：通过对象改变多个数据,但是不能写业务逻辑
const handleClickPatch = () => {
  store.$patch({
    count:store.count + 1,
    keyWord:store.keyWord === 'helloWorld' ? 'hahah' : 'helloWorld'
  })
}

// 第三种方式：传递一个函数，可以实现业务逻辑
const handleClickPatchFunc = () => {
  store.$patch(( state )=>{
    // 可以拿到整个数据仓库
    state.count++
    console.log(state);
  })
}

// 第四种方式：通过action实现业务逻辑
const handleClickPatchAction = () => {
  store.changeCount()
}

</script>

<template>
  <h1>{{ store.keyWord }}---{{ store.count }}</h1>
  <h1>getters--{{ store.countGetters }}</h1>
  <button @click="handleClick">count++</button>
  <button @click="handleClickPatch">对象形式</button>
  <button @click="handleClickPatchFunc">函数形式</button>
  <button @click="handleClickPatchAction">action形式</button>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>

注意：这里使用的时候用store.属性名的方式取值的，不能直接解构赋值，会使数据失去响应式，需要使用pinia中的storeToRefsapi

pinia的持久化

与vuex类似，pinia也有相应的持久化插件pinia-plugin-persist

• 安装–npm i pinia-plugin-persist -S
• 使用:在main.js中引入，并在仓库中设置

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

import piniaPluginPersist from 'pinia-plugin-persist'
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersist)
app.use(pinia)
app.mount('#app')

///src/store/mainStore.js
import { defineStore } from 'pinia'
const mainStore = defineStore('mainStore', {
  state:() => ({
      count:0,
      keyWord:'helloWorld'
  }),
  getters:{
    countGetters(){
      return this.count+10
    }
  },
  actions:{
    //注意这里不能使用箭头函数，因为this指向会出问题
    changeCount(){
      this.count++
    },
  },
    // 开启数据缓存
    persist: {
      enabled: true,
      // 自定义key值，和存储类型
      strategies: [
        {
          key: 'my_user',
          storage: localStorage,
        }
      ]
    }
})
export {
  mainStore
}