Vite+Vue3+Pinia学习笔记

项目中安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

// main.js中引入
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);

// vue使用pinia
import { createPinia } from "pinia"
app.use(createPinia());

定义store，渲染state

在 src 目录下新建 store 目录，store 目录下新建 demo.ts

import { defineStore } from 'pinia';

export const demoStore = defineStore('demo', {
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      counter: 0 as Number,
      mobile:"13111111111" as String
    }
  },
  getters:{},
  actions:{}
})

在页面组件中渲染 state

<script lang="ts" setup>
// 引入storeToRefs函数，使得解构store仍具有响应式特性
import { storeToRefs } from "pinia";
// 引入定义的store
import { demoStore } from '@/store/demo';

// 实例化demoStore
const store = demoStore();
// 解构store获取state值
const { counter } = storeToRefs(store);
</script>

<template>
  <div>
    pinia测试{
   
   {counter}}
  </div>
</template>

<style lang="less" scoped>

</style>

修改state的几种方式

// 修改上面代码

<script lang="ts" setup>
// 引入storeToRefs函数，使得解构store仍具有响应式特性
import { storeToRefs } from "pinia";
// 引入定义的store
import { demoStore } from '@/store/demo';

// 实例化demoStore
const store = demoStore();
// 解构store获取state值
const { counter } = storeToRefs(store);

// 1.直接修改state
// const addCounter = () => store.counter ++;
// const reduceCounter = () => store.counter --;

// 2.$patch传递对象
const addCounter = () => {
  store.$patch({
    count:store.counter += 2,
    mobile:"13122222222"
  })
  store.getList();
};
const reduceCounter = () => {
  store.$patch({
    count:store.counter -= 2,
    mobile:"13122222222"
  })
};

// 3.$patch传递方法
// const addCounter = () => {
//   store.$patch(state => {
//     state.counter += 10
//   })
// };
// const reduceCounter = () => {
//   store.$patch(state => {
//     state.counter -= 10
//   })
// };

// 4.actions，查看下个代码片段
// 在actions中定义改变方法，组件通过store实例直接调用
// const addCounter = () => {
//   store.add(20);
// };
// const reduceCounter = () => {
//   store.reduce(20)
// };
</script>

<template>
  <div>
    pinia测试{
   
   {counter}}
    <button @click="addCounter">+</button>
    <button @click="reduceCounter">-</button>
  </div>
</template>

// 接上述代码片段4.actions修改state
// store/demo.ts

import { defineStore } from 'pinia';

export const demoStore = defineStore('demo', {
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      counter: 0 as Number,
      mobile:"13111111111" as String
    }
  },
  getters:{},
  actions:{
    // 4.改变state值
    add(n:number){
      this.counter += n;
    },
    reduce(n:number){
      this.counter -= n;
    }
  }
})

Getters的使用

// store/demo.ts

import { defineStore } from 'pinia';

export const demoStore = defineStore('demo', {
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      counter: 0 as Number,
      mobile:"13111111111" as String
    }
  },
  getters:{
    mobileHidden:(state):String => {
      return state.mobile.replace(/(\d{3})\d{4}(\d{4})/g,`$1****$2`);
    }
  },
  actions:{
    // 4.改变state值
    add(n:number){
      this.counter += n;
    },
    reduce(n:number){
      this.counter -= n;
    }
  }
})

// 页面组件中使用同state

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { demoStore } from '@/store/demo';

const store = demoStore();
// 直接解构得出
const { counter,mobileHidden } = storeToRefs(store);
</script>

<template>
  <div class="x-demo-pinia">
    pinia测试{
   
   {counter}}-{
   
   {mobileHidden}}
  </div>
</template>

<style lang="less" scoped>

</style>

store互调

在 store 目录下新建 test.ts 作为第二个 store

// store/test.ts

import { defineStore } from 'pinia';

export const testStore = defineStore('test', {
  state: () => {
    return {
      list:[1,2,3] as Array<number>
    }
  },
  getters:{},
  actions:{}
})

// store/demo.ts

import { defineStore } from 'pinia';
// 引入testStore
import { testStore } from './test';
import { toRaw } from "vue";

export const demoStore = defineStore('demo', {
  state: () => {
    return {}
  },
  getters:{},
  actions:{
    // store互调
    getList(){
        // 需要先将testStore调用实例化，然后读取里面state
        console.log(toRaw(testStore().list))
    }
  }
})

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { demoStore } from '@/store/demo';

const store = demoStore();
const { counter,mobileHidden } = storeToRefs(store);

const addCounter = () => {
  store.$patch({
    count:store.counter += 2,
    mobile:"13111111111"
  })
  // 直接调用demoStore.getList方法
  store.getList();
};
</script>

<template>
  <div class="x-demo-pinia">
    pinia测试{
   
   {counter}}-{
   
   {mobileHidden}} 
    <button @click="addCounter">+</button>
  </div>
</template>