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【$subscribe】通过store的‘$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')复制