pinia的基本使用

安装

npm i pinia

src 下创建 store/user.ts 文件

“这里我们为了方便模块使用,文件名字使用模块名字,但其实pinia是不需要模块的,便于理解,这里就这样叫了”

import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state: () => {
    return {};
  },
  getters: {},
  actions: {},
});

defineStore是pinia提供的方法,接受两个参数,
参数1: id/模块名
参数2:options配置项,是object类型,分别记录 state、getters、actions

在main.ts中挂载pinia

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
const pinia = createPinia();
createApp(App)
  .use(pinia)
  .mount('#app');

createPinia是pinia中提供的用于创建pinia实例的方法

state

创建state

import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      userInfos:{
        name: 'zs',
        age: 18,
        sex: 'man',
    };
  }
});

页面中使用 state

storeToRefs()解构出pinia中定义的state的值,并且已经是响应式的

<template>
  <div>
    <ul>
      <li>{{ userInfos.name }}</li>
      <li>{{ userInfos.age }}</li>
      <li>{{ userInfos.sex }}</li>
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  const store = useUserStore();
  const { userInfos } = storeToRefs(store);
</script>
<style scoped></style>

直接修改state的值

<template>
  <div>
    <ul>
      <li>{{ userInfos.name }}</li>
      <li>{{ userInfos.age }}</li>
      <li>{{ userInfos.sex }}</li>
    </ul>
    <button @click="changeAge">修改state: age++</button><br />
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  const store = useUserStore();
  console.log(store);
  const { userInfos } = storeToRefs(store);
  // 可以直接修改state的值
  const changeAge = () => {
    userInfos.value.age++;
  };
</script>
<style scoped></style>

批量修改state的值 $path

<template>
  <div>
    <ul>
      <li>{{ userInfos.name }}</li>
      <li>{{ userInfos.age }}</li>
      <li>{{ userInfos.sex }}</li>
    </ul>
    <button @click="changeAge">修改state: age++</button><br />
    <button @click="pathState">批量修改state</button><br />
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  const store = useUserStore();
  console.log(store);
  const { userInfos } = storeToRefs(store);
  // 可以直接修改state的值
  const changeAge = () => {
    userInfos.value.age++;
  };
  // 批量修改
  const pathState = () => {
    store.$patch({
      userInfos: { name: 'ks', age: 20 },
    });
  };
</script>
<style scoped></style>

替换state的值

<template>
  <div>
    <ul>
      <li>{{ userInfos.name }}</li>
      <li>{{ userInfos.age }}</li>
      <li>{{ userInfos.sex }}</li>
    </ul>
    <button @click="changeAge">修改state: age++</button><br />
    <button @click="pathState">批量修改state</button><br />
    <button @click="replaceState">替换state</button><br />
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  const store = useUserStore();
  console.log(store);
  const { userInfos } = storeToRefs(store);
  // 可以直接修改state的值
  const changeAge = () => {
    userInfos.value.age++;
  };
  // 批量修改
  const pathState = () => {
    store.$patch({
      userInfos: { name: 'ks', age: 20 },
    });
  };
  // 替换State
  const replaceState = () => {
    store.$state.userInfos = { age: 20, name: 'eee', sex: 'women' };
  };
</script>
<style scoped></style>

重置state的值$reset

<template>
  <div>
    <ul>
      <li>{{ userInfos.name }}</li>
      <li>{{ userInfos.age }}</li>
      <li>{{ userInfos.sex }}</li>
    </ul>
    <button @click="changeAge">修改state: age++</button><br />
    <button @click="pathState">批量修改state</button><br />
    <button @click="replaceState">替换state</button><br />
    <button @click="reset">重置state的值</button><br />
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  const store = useUserStore();
  console.log(store);
  const { userInfos } = storeToRefs(store);
  // 可以直接修改state的值
  const changeAge = () => {
    userInfos.value.age++;
  };
  // 批量修改
  const pathState = () => {
    store.$patch({
      userInfos: { name: 'ks', age: 20 },
    });
  };
  // 替换State
  const replaceState = () => {
    store.$state.userInfos = { age: 20, name: 'eee', sex: 'women' };
  };
  //重置state的值
  const reset = () => {
    store.$reset();
  };
</script>
<style scoped></style>

getters

创建getters

类似于vue中的计算属性computed,同样会自动缓存
接受一个参数state,并且内部的this指向state
需要接受额外的参数,需要 return 一个函数体

import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      userInfos: { name: 'zs', age: 18, sex: 'man' },
    };
  },
  getters: {
    // 默认接受一个 state 参数
    getAddAge: state => {
      return state.userInfos.age + 10;
    },
    // getters 需要其他参数时,return 一个函数
    getSubAge: state => {
      return (num: number) => state.userInfos.age - num;
    },
    getNameAndAge(): string {
      return this.userInfos.name + this.getAddAge;
    },
  },
  },
});

页面中使用getters

store.getters定义的函数名字

<template>
  <div>
    <ul>
      <li>{{ userInfos.name }}</li>
      <li>{{ userInfos.age }}</li>
      <li>{{ userInfos.sex }}</li>
      <li>新的年龄:{{ store.getAddAge }}</li>
      <li>getters: {{ store.getNameAndAge }}</li>
      <li>getters: {{ store.getSubAge(2) }}</li>
    </ul>
    <button @click="changeAge">修改state: age++</button><br />
    <button @click="pathState">批量修改state</button><br />
    <button @click="replaceState">替换state</button><br />
    <button @click="reset">重置state的值</button><br />
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  const store = useUserStore();
  console.log(store);
  const { userInfos } = storeToRefs(store);
  // 可以直接修改state的值
  const changeAge = () => {
    userInfos.value.age++;
  };
  // 批量修改
  const pathState = () => {
    store.$patch({
      userInfos: { name: 'ks', age: 20 },
    });
  };
  // 替换State
  const replaceState = () => {
    store.$state.userInfos = { age: 20, name: 'eee', sex: 'women' };
  };
  //重置state的值
  const reset = () => {
    store.$reset();
  };
</script>
<style scoped></style>

actions

创建actions

pinia中的actions真是太简单啦,不再像vuex中actions处理异步再调用mutations修改state
pinia中的actions可以随便做,同步异步,修改state,都行,这里简单写下actions的用法

import { defineStore } from 'pinia';
  export const useUserStore = defineStore('user', {
    state: () => {
      return {
        userInfos: { name: 'zs', age: 18, sex: 'man' },
      };
    },
    getters: {
      //   默认接受一个 state 参数
      getAddAge: state => {
        return state.userInfos.age + 10;
      },
      // getters 需要其他参数时,return 一个函数
      getSubAge: state => {
        return (num: number) => state.userInfos.age - num;
      },
      getNameAndAge(): string {
        return this.userInfos.name + this.getAddAge;
      },
    },
    actions: {
      saveName(name: string) {
        this.userInfos.name = name;
      },
    },
  });

页面中使用actions

<template>
  <div>
    <ul>
      <li>{{ userInfos.name }}</li>
      <li>{{ userInfos.age }}</li>
      <li>{{ userInfos.sex }}</li>
      <li>新的年龄:{{ store.getAddAge }}</li>
      <li>getters: {{ store.getNameAndAge }}</li>
      <li>getters: {{ store.getSubAge(2) }}</li>
    </ul>
    <button @click="changeAge">修改state: age++</button><br />
    <button @click="pathState">批量修改state</button><br />
    <button @click="replaceState">替换state</button><br />
    <button @click="reset">重置state的值</button><br />
    <button @click="saveName">调用actions方法保存name</button>
  </div>
</template>
<script setup lang="ts">
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  const store = useUserStore();
  console.log(store);
  const { userInfos } = storeToRefs(store);
  // 可以直接修改state的值
  const changeAge = () => {
    userInfos.value.age++;
  };
  // 批量修改
  const pathState = () => {
    store.$patch({
      userInfos: { name: 'ks', age: 20 },
    });
  };
  // 替换State
  const replaceState = () => {
    store.$state.userInfos = { age: 20, name: 'eee', sex: 'women' };
  };
  //重置state的值
  const reset = () => {
    store.$reset();
  };
  // 调用actions方法
  const saveName = () => {
    store.saveName('小猪佩奇');
  };
</script>
<style scoped></style>