vue3的pinia详解

引入pinia

安装pinia

cnpm install pinia --save

main.js

import {createPinia} from "pinia"

const pinia=createPinia()

app.use(pinia)

state

state是store的核心部分

创建store仓库【src/store/count.js】

选项式

     import { defineStore } from "pinia"
            //模块命名规则：use+关键功能+Store
            //defineStore:参数1：命名  参数2：对象
            export const useConutStore = defineStore("count", {
                //state必须是函数类型
                state: () => {
                    return {
                        count:20
                    }
                }
            })

组合式

   import { defineStore } from "pinia"
            import {ref,reactive} from "vue"
            //模块命名规则：use+关键功能+Store
            //组合式API优势：不需要引入state
            export const useConutStore = defineStore("count", ()=>{
                const count=ref(200)
                const userInfo=reactive({
                    name:"wkj"
                })  
                return {
                    count,
                    userInfo
                }
            })

访问 “state”

【组合式API】

【选项式API】

修改 “state”

在 pinia 中修改状态要比在 vuex 中修改状态简单的多，因为不用引入额外的概念，直接用 store.counter++ 修改 store

组合式API

     import { useCountStore } from "../store/count"
        const store = useCountStore();
        function updateClick(){
          store.count++
        }

选项式API

  import { mapState,mapWritableState  } from "pinia"
        import { useCountStore } from "../store/count"
        export default {
          computed:{
            ...mapState(useCountStore,{
              myOwnName:"count",
              count:store => store.count,
              doubleCount(store){
                return store.count * 2
               }
             }),
            ...mapWritableState(useCountStore,["count"])
           },
          methods:{
            updateClick(){
              this.count++
             }
           }
        }
        

Getters

Getter 完全等同于 Store 状态的计算值

创建store仓库【src/store/count.js】

  import { defineStore } from "pinia"
            export const useCountStore = defineStore("count",{
              state:() =>{
                return{
                  count:10
                 }
               },
              getters:{
                getCount:(state) => "当前Count："+ state.count
               }
            })
             

访问 Getters

组合式API

选项式API

访问其他 Getter

  getters:{
                getCount:(state) => "当前Count："+ state.count,
                  doubleCount(state){
                  return this.getCount + state.count
                 }
              }

Actions

Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑

创建store仓库【src/store/count.js】

            import { defineStore } from "pinia"
            export const useCountStore = defineStore("count", {
              state: () => {
                return {
                  count: 10
                 }
               },
              getters: {
                getCount: (state) => "当前Count：" + state.count,
                doubleCount(state) {
                  return this.getCount + state.count
                 }
               },
              actions: {
                increment() {
                  this.count++
                 },
                decrement() {
                  this.count--
                 }
               }
            })

读取Actions

组合式API

选项式API

异步操作

actions 可以是异步的，这也是使用 actions 最大的原因

  import { defineStore } from "pinia"
            import axios from "axios"
            export const useBannerStore = defineStore("banner", {
              state: () => {
                return {
                  banner:[]
                 }
               },
              actions: {
                setBanner(url){
                  axios.get(url)
                   .then(res =>{
                    this.banner = res.data.banner
                   }).catch(error =>{
                    console.log(error);
                   })
                 }
               }
            })
            

             
             

解构赋值响应式

直接从 pinia 中解构赋值，操作的时候会发现，内容根本不会发生变化，因为直接从 pinia 中解构数据失去了响应式

我们可以用 storeToRefs 来解决找个问题

            import { storeToRefs } from "pinia";
            import { useCountStore } from "../store/count";
            const store = useCountStore();
            const { count } = storeToRefs(store)
            function addCountHandler(){
              store.increment(5)
            }
            function minCountHandler(){
              store.decrement(5)
            } 

Pinia热更新

pinia 支持热模块替换，因此你可以编辑store，并直接在您的应用程序中与它们交互，而无需重新加载页面，允许您保持现有的状态，添加，甚至删除state，action和getter

    import { defineStore, acceptHMRUpdate } from "pinia"
            import axios from "axios"
            
            
            export const useCountStore = defineStore("count", {
              state: () => {
                return {
                  count: 10
                 }
               },
              getters: {
                getCount: (state) => "当前Count：" + state.count
               }
            })
            
            
            if (import.meta.hot) {
              import.meta.hot.accept(acceptHMRUpdate(useCountStore, import.meta.hot))
            }
             

数据持久化插件

安装pinia数据持久化插件

cnpm install --save pinia-plugin-persist

main.js

import piniaPersist from 'pinia-plugin-persist'

pinia.use(piniaPersist)

编写stores/loginStore.js

   import { defineStore } from "pinia"
  
            export const useLoginStore = defineStore("login", {
                state: () => {
                    return {
                        token:false,//登录的token
                        username: "",//用户名
                        permissions:''//用户权限
                    }
                },
                //本地持久化(把数据存储到浏览器本地)
                persist: {
                    enabled: true,//是否开启持久化
                    strategies: [
                        {
                            key: 'login', //自定义Key值,存储到本地时的key
                            storage: localStorage, // 选择存储方式：本地存储
                        },
                    ],
                }
            })