安装

npm i pinia --save

main.ts引入pinia

import { createPinia } from 'pinia';

const app = createApp(App);

const pinia = createPinia();
app.use(pinia).mount('#app);

创建test.ts

import { defineStore } from "pinia";

export const useTestStore = defineStore('test',{
    state:() => {
        return {
            msg:['hello world'],
        }
    }
})

pinia之state

使用testStore中的数据

<template>
  <div class="about">
    {{testStore.msg }}
  </div>
</template>
<script lang="ts" setup>
import { useTestStore } from '@/store/test';

const testStore = useTestStore();
</script>

修改testStore中的数据

<template>
  <div class="about">
    {{testStore.msg }}
    <button @click="updateStore">更新</button>
  </div>
</template>
<script lang="ts" setup>
import { useTestStore } from '@/store/test';

const testStore = useTestStore();
const updateStore = () => {
  testStore.msg.push('a111');
}
</script>

$patch()方法修改state

$patch()方法写法一

<template>
  <div class="about">
    {{testStore.msg }}--{{ testStore.count }}
    <button @click="updateStore">更新</button>
  </div>
</template>
<script lang="ts" setup>
import { useTestStore } from '@/store/test';

const testStore = useTestStore();
const updateStore = () => {
  testStore.$patch({
    msg:['1','2'],
    count:1000,
  });
}
</script>

$patch()方法写法二

const updateStore = () => {
  testStore.$patch((state) => {
    state.msg.push('aaa');
    state.count += 100;
  });
}

$reset()方法重置state

testStore.$reset();

$subscribe监听state变化

testStore.$subscribe((mutation,state) => {
  console.log(mutation,state);
})

storeToRefs()函数解构state

<template>
  <div class="about">
    {{msg }}--{{ count }}
    <br />
    <button @click="updateStore">更新</button>
  </div>
</template>
<script lang="ts" setup>
import { useTestStore } from '@/store/test';
import {storeToRefs} from 'pinia'

const testStore = useTestStore();
const {msg,count} = storeToRefs(testStore);
const updateStore = () => {
  msg.value.push('111');
  count.value += 100;
}
</script>

pinia之getter

getter类似于计算属性，返回经过加工的state中的数据 代码示例，getter中的两种写法

import { defineStore } from "pinia";

export const useTestStore = defineStore('test',{
    state:() => {
        return {
            msg:['hello world'],
            count:0,
        }
    },
    getters:{
        //写法一
        doubleCount:(state) => {
            return state.count * 2;
        },
        //写法二
        countPlus(){
            return this.count + 5;
        }
    }
})

<template>
  <div class="about">
    {{msg }}--{{ count }}
    <br />
    {{ doubleCount }}--{{ countPlus }}
    <br />
    <button @click="updateStore">更新</button>
  </div>
</template>
<script lang="ts" setup>
import { useTestStore } from '@/store/test';
import {storeToRefs} from 'pinia'

const testStore = useTestStore();
const {msg,count,doubleCount,countPlus} = storeToRefs(testStore);
const updateStore = () => {
  msg.value.push('111');
  count.value += 100;
}
</script>

pinia之actions

import { defineStore } from "pinia";

export const useTestStore = defineStore('test',{
    state:() => {
        return {
            msg:['hello world'],
            count:0,
        }
    },
    getters:{
        //写法一
        doubleCount:(state) => {
            return state.count * 2;
        },
        //写法二
        countPlus(){
            return this.count + 5;
        }
    },
    actions:{
        increaseCount(){
            this.count += 10000;
        }
    }
})

<template>
  <div class="about">
    {{ count }}
    <br />
    <button @click="updateStore">更新</button>
  </div>
</template>
<script lang="ts" setup>
import { useTestStore } from '@/store/test';
import {storeToRefs} from 'pinia'

const testStore = useTestStore();
const {count} = storeToRefs(testStore);
const updateStore = () => {
  testStore.increaseCount();
}
</script>

setup方式创建Store

import { defineStore } from "pinia";
import { computed, ref } from "vue";

export const useTestStore2 = defineStore('test2',() => {
    const msg = ref(['hello world']);
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    const increaseCount = () => {
        msg.value.push('a111');
        count.value = 100;
        return 2;
    }

    return {msg,count,doubleCount,increaseCount};
});

<template>
  <div class="about">
    {{ count }} -- {{ msg }} -- {{ doubleCount }}
    <br />
    <button @click="updateStore">更新</button>
  </div>
</template>
<script lang="ts" setup>
import { useTestStore2 } from '@/store/test';
import {storeToRefs} from 'pinia'

const testStore = useTestStore2();
const {msg,count,doubleCount,increaseCount} = storeToRefs(testStore);
const updateStore = () => {
  testStore.increaseCount();
}
</script>