【笔记】Pinia学习笔记

发表于 更新于 分类于 阅读次数：

前言

Pinia符合直觉的Vue.js状态管理库（官网）

通过Pinia实现对Vue项目的状态管理

下载依赖

1
npm install pinia

定义Pinia

src/store/index.js
1
2
3
4
5
import { createPinia } from "pinia"

const pinia = createPinia();

export default pinia;

挂载Pinia

src/main.js
1
2
3
4
5
6
7
import { createApp } from "vue"
import store from "./store/index.js"
import App from "./App.vue"

const app = createApp(App);
app.use(store);
app.mount("#app");

定义Store

home：指定Store的id

src/store/home.js
1
2
3
4
5
6
7
8
9
10
11
import { defineStore } from "pinia"

const useHome = defineStore("home", {
  state: function () {
    return {
      key: "value"
    }
  }
});

export default useHome;

获取Store中的State

通过script获取Store中的State

CompositionAPI

1
2
3
4
5
6
7
8
9
<template>
  {{ homeStore.key }}
</template>

<script setup>
  import useHome from "@/store/home.js"

  const homeStore = useHome();
</script>
  • 直接解构
1
2
3
4
5
6
7
8
9
10
11
<template>
  {{ homeStore.key }}
</template>

<script setup>
  import { toRefs } from "vue"
  import useHome from "@/store/home.js"

  const homeStore = useHome();
  const { key } = toRefs(homeStore);
</script>
1
2
3
4
5
6
7
8
9
10
11
<template>
  {{ homeStore.key }}
</template>

<script setup>
  import { storeToRefs } from "pinia"
  import useHome from "@/store/home.js"

  const homeStore = useHome();
  const { key } = storeToRefs(homeStore);
</script>

修改Store中的State

CompositionAPI

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div v-on:click="setKey"></div>
</template>

<script setup>
  import useHome from "@/store/home.js"

  const homeStore = useHome();
  
  function setKey() {
    homeStore.key = "new value";
  }
</script>

修改多个Store中的State

CompositionAPI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div v-on:click="setKey"></div>
</template>

<script setup>
  import useHome from "@/store/home.js"

  const homeStore = useHome();
  
  function setKey() {
    homeStore.$patch({
      key1: "value",
      key2: "value",
    });
  }
</script>

重置Store中的State

CompositionAPI

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div v-on:click="resetKey"></div>
</template>

<script setup>
  import useHome from "@/store/home.js"

  const homeStore = useHome();
  
  function resetKey() {
    homeStore.$reset();
  }
</script>

替换Store为新的对象

CompositionAPI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div v-on:click="replaceStore"></div>
</template>

<script setup>
  import useHome from "@/store/home.js"

  const homeStore = useHome();
  
  function replaceStore() {
    homeStore.$state = {
      key: "value"
    };
  }
</script>

Getters

  • 通过Getters获取Store中的值

定义Getters

  • 在Store对象中通过getters属性定义Getters
src/store/home.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { defineStore } from "pinia"

const useHome = defineStore("home", {
  state: function () {
    return {
      key: "value"
    }
  },
  getters: {
    getKey: function (state) {
      return state.key;
    },
    getOther: function (state) {
      return this.getKey();
    },
    getFn: function (state) {
      return function (key) {
        return key;
      };
    }
  }
});

export default useHome;

定义Getters获取其他Store中的返回值

src/store/home.js
1
2
3
4
5
6
7
8
9
10
11
import { defineStore } from "pinia"

const useHome = defineStore("home", {
  state: function () {
    return {
      key: "value"
    }
  }
});

export default useHome;
src/store/other.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineStore } from "pinia"
import useHome from "@/store/home.js"

const homeStore = useHome();

const useOther = defineStore("other", {
  getters: {
    getKey: function (state) {
      return homeStore.key;
    }
  }
});

export default useOther;

获取Getters的返回值

CompositionAPI

1
2
3
4
5
6
7
8
9
10
11
<template>
  {{ homeStore.getkey }}
  {{ homeStore.getOther }}
  {{ homeStore.getFn("value") }}
</template>

<script setup>
  import useHome from "@/store/home.js"

  const homeStore = useHome();
</script>

Action

定义Action

src/store/home.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { defineStore } from "pinia"

const useHome = defineStore("home", {
  state: function () {
    return {
      key: "value"
    }
  },
  actions: {
    setKeyAction: function (payload) {
      return this.key = payload;
    }
  }
});

export default useHome;

调用Action

CompositionAPI

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div v-on:click="fn"></div>
</template>

<script setup>
  import { useHome } from "@/store/home.js"

  const homeStore = useHome();
  
  function fn() {
    homeStore.setKeyAction("value");
  }
</script>

完成