32-pinia

一引入依赖

npm install pinia -S  

或者

yarn add pinia

在main.ts中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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

let app = createApp(App)

app.use(store)

app.mount('#app')

import { defineStore } from "pinia";

enum Names {
  TEST = 'TEST'
}

export const useTestStore = defineStore(Names.TEST, {
    state: () => {
      return {
        current: 1000,
        name: '隔壁老王',
      }
    },
    getters: {
      //Getter 完全等同于 Store 状态的 计算值
      //getter 不再缓存，它们只是您调用的函数。 但是，您可以在 getter 本身内部缓存一些结果，这并不常见，但应该证明性能更高

    },
    actions: {
      //actions 可以同步
      //actions 可以是异步的结合await使用

      setCurrent(num:number) {
        this.current = num
      }
    }
})

二修改state的值

<template>
   pinia: {{ Test.current }} -- {{ Test.name }}
   change:
   <button @click="change">change</button>
</template>

<script setup lang="ts">
  import { useTestStore } from '../store/index'

  const Test = useTestStore()

  const change = () => {
   //方法一
   //Test.current++

   //方法二
   // Test.$patch({
   //    current: 888,
   //    name: '娃娃',
   // })

   //方法三 常用方式
   // Test.$patch((state) => {
   //    state.current = 999,
   //    state.name = '郁郁'
   // })

   //方法四  不常用所有的都要负值
   // Test.$state = {
   //    current: 2000,
   //    name: '测试'
   // }

   //方法五 直接调用actions里面方法
   Test.setCurrent(123)
  }

</script>

<style lang="less" scoped>

</style>

 三 storeToRefs解构store

 

<template>
   <div>
      pinia: {{ Test.current }} -- {{ Test.name }}
   </div>
   <div>
      {{ current }}  ---  {{ name }}
      change:
      <button @click="change">change</button>
   </div>
</template>

<script setup lang="ts">
  import { useTestStore } from '../store/index'
  import { storeToRefs } from 'pinia'

  const Test = useTestStore()
  //pinia 解构不具有响应式
  const { current, name } = storeToRefs(Test)  //storeToRefs 响应式

  const change = () => {
     Test.current++
     console.log(current, name)
  }

</script>

<style lang="less" scoped>

</style>

四 getters 和 actions

 

 

import { defineStore } from "pinia";

enum Names {
  TEST = 'TEST',
  USER = 'USER'
}

export const useTestStore = defineStore(Names.TEST, {
    state: () => {
      return {
        current: 1000,
        name: '隔壁老王',
      }
    },
    getters: {
      //Getter 完全等同于 Store 状态的 计算值
      //getter 不再缓存，它们只是您调用的函数。 但是，您可以在 getter 本身内部缓存一些结果，这并不常见，但应该证明性能更高

    },
    actions: {
      //actions 可以同步
      //actions 可以是异步的结合await使用

      setCurrent(num:number) {
        this.current = num
      }
    }
})

type User = {
  name: string,
  age: number,
}

const Login = ():Promise<User> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: '飞机',
        age: 999
      })
    }, 2000)
  })
}

export const useUser = defineStore(Names.USER, {
  state: () => {
    return {
      user: <User>{},
      name: '小飞机'
    }
  },
  getters: {
    newName():string {
      return `$-${ this.name }-${ this.getUserAge }`
    },
    getUserAge():number {
      return this.user.age
    }
  },
  actions: {
    async setUser() {
      this.user = await Login()
      this.setName('大飞机')
    },
    setName(name: string) {
      this.name = name
    }
  }
})

五 api调用

 

<template>
   <div>
      pinia: {{ User.user }}------{{ User.name }}--------{{ User.newName }}
   </div>
   <div>
      <button @click="change">change</button>
      <button @click="reset">reset</button>
   </div>
</template>

<script setup lang="ts">
  import { useUser } from '../store/index'

  const User = useUser()

  const change = () => {
     User.setUser()
  }

  //重置reset
  const reset = () => {
     User.$reset() //您可以通过调用 store 上的 $reset() 方法将状态
  }

  //可以通过 store 的 $subscribe() 方法查看状态及其变化，类似于 Vuex 的 subscribe 方法。
  //与常规的 watch() 相比，使用 $subscribe() 的优点是 subscriptions 只会在 patches 之后触发一次
  User.$subscribe((args, state) => {
   console.log(args, state, 'xxxxxxx')
  })

  //调用aciton方法触发
  User.$onAction((args) => {
   args.after(() => {
      console.log('after')
   })
    console.log(args, 'action')
  })
</script>

<style lang="less" scoped>

</style>

六 pinia持久化

pinia-use-persist - npm

安装 

npm i pinia-use-persist

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import { createPinia } from 'pinia'
import { usePersist  } from "pinia-use-persist";

const pinia = createPinia()

let app = createApp(App)

pinia.use(usePersist)
app.use(pinia)

app.mount('#app')

 

 

export const useUser = defineStore(Names.USER, {
  state: () => {
    return {
      user: <User>{},
      name: '小飞机'
    }
  },
  getters: {
    newName():string {
      return `$-${ this.name }-${ this.getUserAge }`
    },
    getUserAge():number {
      return this.user.age
    }
  },
  actions: {
    async setUser() {
      this.user = await Login()
      this.setName('大飞机')
    },
    setName(name: string) {
      this.name = name
    }
  },
  persist: {
    enabled: true,
    encryptionKey: 'my-test',
    storage: sessionStorage,
  }
})