vue ts的pinia使用教程常用实际开发方法

vue+ts中的pinia使用教程加实际开发方法

安装
引入
使用pinia
- 存储和修改数据
- 【storeToRefs】
- 【getters】使用
- 【$subscribe】
开发常用形式

安装

1、安装

npm install pinia

引入

2、在main.ts中注册安装pinia
//引入pinia

import { createPinia } from 'pinia'

//创建pinia
const app = createApp(App)
const pinia  = createPinia()

app.use(router as any)
//安装pinia
app.use(pinia)
app.mount('#app')

使用pinia

3、使用pinia
在src文件下创建store文件夹，在文件夹中新建ts文件

存储和修改数据

3.1 存储和修改数据
它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。

//**
*demo.ts
*/
import {createPinia, defineStore } from "pinia";
//对外暴露
export const  useDemoStore = defineStore('demo', {
    persist: true,
    state: () => ({
        demoid: 1
        /**
             * .vue
             * import useDemoStore from '@/store/demo
             * const demoStore = useDemoStore
             * console.log(demoStore.demo)
             * */
    }),
//actions里面放置的是方法，用于响应组件中的动作
     actions: {
       add(value:number) {
           this.demoid= value
       },
     },
})

/**
*.vue文件
*/
<template>
  <div>
    {{ demoStore.demoid }}
    <button @click="add"></button>
  </div>
</template>
<script setup lang="ts">
//引入仓库
import { useDemoStore } from '@/store/demo'
//拿到数据
const demoStore = useDemoStore()
console.log('11111',demoStore.demoid)

function add(){
//处理修改数据
	//第一种方式：直接修改
	demoStore.demoid =7
	
	//第二种方式：批量修改
	demoStore.$patch({
	     demoid：7，
	   })
	   
	/**
	*第三种方式：借助`action`修改（`action`中可以编写一些业务逻辑）
	*组件中调用`action`即可
	*当一个方法被重复调用时，推荐使用第三种方法
	*/
	demoStore.add(7)
	console.log('222',demoStore.demoid)
}
</script>

【storeToRefs】

3.2【storeToRefs】
借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。
注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据。

<template>
  <div class="count">
    <h2>当前求和为：{{demoid}}</h2>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { useDemoStore} from '@/store/count'
  /* 引入storeToRefs */
  import { storeToRefs } from 'pinia'
//storeToRefs只会关注sotre中数据，不会对方法进行ref包裹

  /* 得到countStore */
  const demoStore =useDemoStore()
  /* 使用storeToRefs转换countStore，随后解构 */
  const {demoid} = storeToRefs(demoStore)
</script>

【getters】使用

3.3【getters】使用

//demo.ts文件
getters:{
         bigSum:(state):number => state.sum *10,
         upperSchool():string{
           return this. school.toUpperCase()
         }
       }

//组件中使用

<template>
  <div>
    {{ demoStore.demoid }}
    {{ demoStore.bigSum }}
    <button @click="add"></button>
    <RouterView></RouterView>
  </div>
</template>

【$subscribe】

3.4【 $s u b scr ib e 】通过 s t ore 的 ‘$ subscribe()方法侦听state` 及其变化

<script setup lang="ts">
import { useDemoStore } from '@/store/demo'
const demoStore = useDemoStore()
function add(){
demoStore.$subscribe((mutate,state)=>{
//将数据存入浏览器上的localStorage
    localStorage.setItem('demoid',JSON.stringify(state.demoid))
  })
}
</script>
//**
*demo.ts
*/
import {createPinia, defineStore } from "pinia";
//对外暴露
export const  useDemoStore = defineStore('demo', {
    persist: true,
    state: () => ({
//保持浏览器刷新数据不丢失
                demoid: JSON.parse(localStorage.getItem('stryyy') as string) || []
    }),
//actions里面放置的是方法，用于响应组件中的动作
     actions: {
       add(value:number) {
           this.demoid= value
       },
     },
})

开发常用形式

4、开发常用形式
在src目录下新建文件
目录结构

加入了pinia持久化存储pinia-plugin-persistedstate 在demo.ts文件中加入persist: true,其余可保持不变
这种方法可以使项目开发更清晰、快捷

//index.ts文件
import { createPinia } from 'pinia';
//Pinia持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'


const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

//对外暴露大仓库
export default pinia;

//demo.ts文件
import {createPinia, defineStore } from "pinia";

const  useDemoStore = defineStore('demo', {
    persist: true,
    state: () => ({
        demoid: localStorage.getItem('stryyy') as unknown as Number || 0
        // demoid: 1
        /**
             * .vue
             * import useDemoStore from '@/store/demo
             * const demoStore = useDemoStore
             * console.log(demoStore.demo)
             * */
    }),
    actions: {
        add(value:number) {
            this.demoid = value
        },
      },
      getters:{
        bigSum:(state):number => state.demoid *10,
        // upperSchool():string{
        //   return this. school.toUpperCase()
        // }
      }
})
export default useDemoStore;

将main.ts文件做如下修改
将引入的import { createPinia } from 'pinia’修改为import store from ‘@/store’
app.use(pinia) 修改为app.use(store)

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//引入pinia
//import { createPinia } from 'pinia'
import store from '@/store'

const app = createApp(App)
//创建pinia
// const pinia  = createPinia()

app.use(router as any)
//安装pinia
// app.use(pinia)
app.use(store)
app.mount('#app')

vue ts的pinia使用教程 常用实际开发方法