首页 前端知识 【学习vite vue3 pinia ts】pinia应用 store的创建及应用

【学习vite vue3 pinia ts】pinia应用 store的创建及应用

2024-06-05 13:06:59 前端知识 前端哥 27 6 我要收藏

在根目录下新建store文件夹,在文件夹下新建index.ts文件

一. src>>store>>index.ts文件中创建store

import { defineStore } from 'pinia'

interface State { }

export const useUserStore = defineStore('main', {
  state: ():State => ({ }),
  //类似于computed
  getters: { },
  //类似于methods
  actions: { }
})

二.在组件中应用store 

<template>
  <div class="page">
    用户名: {{user.name}}
    <a-button type="primary" @click="changeName">修改用户名</a-button>
  </div>
</template>

1. 读取state中的属性

<script setup lang="ts">
  import { useUserStore } from '@/store'
  const user = useUserStore()
</script>

2.state值的六种改变方式

(1)直接修改

<script setup lang="ts">
  import { useUserStore } from '@/store'
  const user = useUserStore()
  const changeName = () =>{
    user.name = '后端'
  }
</script>

(2)$patch批量修改

该修改方式需要定义store的时候,并没有对state函数返回值做类型限制,且批量修改只能修改state函数返回值中已存在的属性

<script setup lang="ts">
  import { useUserStore } from '@/store'
  const user = useUserStore()
  const changeName = () =>{
    user.$patch({
      name: 'vue',
      age: 4,
    })
  }
</script>

(3)$patch带逻辑修改

该中方式支持创建store时对state函数返回值类型限定

-- 若限定中可以有任意属性,则可以添加state中没有的属性

-- 若没有返回值类型限定,则只能修改创建state时已存在的属性

<script setup lang="ts">
  import { useUserStore } from '@/store'
  const user = useUserStore()
  const changeName = () =>{
    user.$patch(state => {
      if(..){
        state.name = 'react'
        state.type = '前端'
      }
    })
  }
</script>

(4)$state替换state

<script setup lang="ts">
  import { useUserStore } from '@/store'
  const user = useUserStore()
  const changeName = () =>{
    user.$state = {
      userId: '666',
      name: 'vscode',
      age: 18
    }
  }
</script>

(5)借助actions方法

src>>store>>index.ts

actions: {
  changName(name:string){
    this.name = name
  }
}

组件中

<script setup lang="ts">
  import { useUserStore } from '@/store'
  const user = useUserStore()
  const changeName = () =>{
    user.changName('333')
  }
</script>

(6)使用$reset重置state 

const store = useStore()
store.$reset()

3.借助 storeToRefs 解构state

<script setup lang="ts">
  import { storeToRefs } from "pinia";
  import { useUserStore } from '@/store'
  const { name } = storeToRefs(useUserStore())
  const changeName = () =>{
    name.value = '111'
  }
</script>

4. actions

可以直接this.xx访问到state中的属性,也可以this.xxx访问到actions中的方法

(1) 处理同步逻辑

actions: {
  changName(name:string){
    this.name = name
  },
}

(2) 处理异步逻辑

import { defineStore } from 'pinia'

interface User {
  userId: string,
  name: string,
  age: number,
  [propName: string]: any
}

const login = ():Promise<User> => {
  return new Promise(resolve => {
    setTimeout(()=>{
      resolve({
        userId: '666',
        name: '333',
        age: 4
      })
    },1000)
  })
}

export const useUserStore = defineStore('main', {
  state: () => {
    return {
      user: <User>{}
    }
  },
  //类似于computed
  getters: {

  },
  //类似于methods
  actions: {
    changName(name:string){
      this.user.name = name
    },
    async setUser(){
      const userInfo = await login()
      this.user = userInfo
    }
  }
})

5.getters

需要定义返回类型,可以在定义常规函数时通过this访问到 整个 store 的实例

(1)函数式写法

//类似于computed
getters: {
  enName():string{
    return this.user.name
  }
},

(2)接收参数 

state: () => {
  let users: Array<User> = []
  return {
    user: <User>{},
    users,
  }
},
//类似于computed
getters: {
  getUserById: (state) => {
    return (userId:string) => state.users.find((user) => user.id === userId)
  }
},

组件中应用

<template>
  <div class="page">
    用户名: {{store.user.name}}<br>{{store.users}}<br> {{ store.getUserById('666') }}
    <br>
    <a-button style="margin-right:10px" type="primary" @click="changeName">修改用户名</a-button>
    <a-button type="primary" @click="addUser">添加用户名</a-button>
  </div>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/store'
  const store = useUserStore()
  const changeName = () =>{
    store.user.name = 'vue'
  }
  const addUser = () =>{
    const user = {
      userId: '666',
      name: 'react',
      age: 4
    }
    store.users.push(user)
  }
</script>

6.组件中对store实例方法的使用

(1)借助$subscribe监测state值的变化 

state中的值发生改变,则会触发 $subscribe 函数,接收一个箭头函数,箭头函数会内部传递两个参数,第一个参数为对变化的监控,第二个参数为修改后的state

store.$subscribe((arg, state)=>{
  console.log('**',arg)
  console.log('==',state)
},{ //第二个参数为配置对象
  detached: true, //组件销毁后依然监测state值的变化
  deep: true, //深度监测
  flush: 'post', //回调的刷新时机 pre默认值,dom更新前调用 sync同步调用 post dom更新后调用
  immediate: true, //立即触发一次
})

(2)借助$onAction监测actions中方法的调用

store.$onAction(arg=>{
  console.log('//', arg)
  arg.after(()=>{
    console.log('123')
  })
}, true) //true为第二个参数,可以不写,写上表示组件销毁后依然监测actions的调用情况

三.借助插件实现持久化保存数据(刷新不丢失)

同vuex一样,刷新页面的时候,store中的数据会重置为初始化,但是pinia支持通过插件将数据保存到 localStorage/sessionStorage/cookie 中

1. src>>plugins>>piniaPlugin.ts

import { PiniaPluginContext } from 'pinia'
import { toRaw } from 'vue'

type Options = {
  key?: string,
  type?: string
}

const _piniaKey:string = 'pinia'
const _type = 'session'

const setStorage = (key:string, value: any, type:string) => {
  switch (type) {
    case 'session':
      sessionStorage.setItem(key, JSON.stringify(value))
      break
    case 'local':
      localStorage.setItem(key, JSON.stringify(value))
      break
  }
}
const getStorage = (key:string, type:string) => {
  let data:any
  switch (type) {
    case 'session':
      data = sessionStorage.getItem(key) ? JSON.parse(sessionStorage.getItem(key) as string) : {}
      break
    case 'local':
      data = localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
      break
  }
  return data
}

const piniaPlugin = (option: Options) => {
  return (context: PiniaPluginContext) => {
    const { store } = context
    const data = getStorage(`${option?.key ?? _piniaKey}-${store.$id}`, `${option?.type ?? _type}`)
    store.$subscribe(() => {
      setStorage(`${option?.key ?? _piniaKey}-${store.$id}`, toRaw(store.$state), `${option?.type ?? _type}`)
    })
    return {
      ...data
    }
  }
}
export default piniaPlugin

2.修改mian.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from '@router/index'
import { createPinia } from 'pinia'
import piniaPlugin from './plugins/piniaPlugin'

const store = createPinia()
store.use(piniaPlugin(
  {
    key: 'pinia',
    type: 'local'
  }
))

const app = createApp(App)

app
.use(store)
.use(router)
.mount('#app')

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10871.html
标签
pinia
评论
发布的文章

基于Vue2的ofd文件预览

2024-06-10 11:06:28

网页快速置灰效果

2024-06-10 11:06:17

HTML5 CSS——Day6

2024-06-10 11:06:11

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!