pinia的使用

1.安装安装pinia

pinia

1.1 安装命令

npm install pinia
# 或者使用 yarn
yarn add pinia
# 或者使用 cnpm
cnpm install pinia
1
2
3
4
5

1.2 代码如下:

// main.js

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();

const app = createApp(App);
app.use(pinia);
app.mount("#app");
1
2
3
4
5
6
7
8
9
10

2.创建store

2.1 代码如下:

/src/store/index.js

import { defineStore } from 'pinia'

//参数是 store 的唯一 id
export const useStore = defineStore('main', {
  state: () => {
    return {
      count: 0,
      name: "张三"
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

2.2.使用store

/src/App.vue

<template>
  <div>
    {{ count }}
    <br />
    <n-button type="primary" @click="changeNum()"> + </n-button>
    <br />
    {{ name }}
    <br />
    <n-button type="primary" @click="changeName()"> 改名 </n-button>
    <br />
    <n-button type="primary" @click="patchStore()"> 批量修改 </n-button>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "../stores/index";
const state = useStore();
import { storeToRefs } from "pinia";
// const { count,name }=state;//页面数据无需更改时使用,不是响应式。
const { count, name } = storeToRefs(state); //页面数据需要更改时使用,storeToRefs函数将state中的数据变为响应式。
const changeNum = () => {
  state.count += 1;
};
const changeName = () => {
  state.name = "李四";
};
const patchStore = () => {
  //store的$patch进行批量修改
  state.$patch({
    count: 1,
    name: "王五",
  });
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3.getters属性

类似于Vue中的computed计算属性，作用就是返回一个新的结果。

/src/store/index.js

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
  state: () => {
    return {
      count: 0,
      name: "张三"
    }
  },
  getters: {
    //直接在getter方法中调用this，this指向的便是store实例
    getCount: (state) => {
      return state.count + 666;
    },
    getName: (state) => {
      return state.name + "666";
    },

    //调用其他getters,不使用箭头函数
    getNamePlus() {
      return this.name + this.getNum;
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/src/App.vue

<template>
  <div>
    {{ state.getCount }}
    <br/>
    {{ state.getName }}
    <br/>
    {{ state.getNamePlus }}
  </div>
</template>

<script setup lang="ts">
import { useStore } from "../stores/index";
const state = useStore();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.actions属性

类似于Vue中的methods方法属性,用来放置一些处理业务逻辑的方法,包括同步方法和异步方法。

/src/store/index.js

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
  state: () => {
    return {
      count: 0,
      name: "张三"
    }
  },
  actions: {
    //把actions方法当作一个普通的方法即可,this指向的是当前store。
    changeCount(count) {
      this.count = count;
    },
    changeName(name) {
      this.name = name;
    }
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/src/App.vue

<template>
  <div>
    {{ count }}
    <br />
    <n-button type="primary" @click="changeCount"> 修改count </n-button>
    <br />
    {{ name }}
    <br />
    <n-button type="primary" @click="changeName"> 修改name </n-button>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "../stores/index";
const state = useStore();
import { storeToRefs } from "pinia";
const { count,name } = storeToRefs(state);
const changeCount = () => {
  state.changeCount(666);
};
const changeName = () => {
  state.changeName("李四");
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

5.持久化存储

使用pinia-plugin-persistedstate实现持久化存储。
pinia-plugin-persistedstate

5.1安装

npm i pinia-plugin-persistedstate
# 或者使用 yarn
yarn add pinia-plugin-persistedstate
# 或者使用 pnpm
pnpm i pinia-plugin-persistedstate
1
2
3
4
5

5.2添加实例

// main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
pinia.use(piniaPluginPersistedstate)
app.use(naive)
app.use(router)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/src/store/index.js

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
  state: () => {
    return {
      count: 0,
      name: "张三",
      save:[
        { id: '1', name: '李四' },
        { id: '2', name: '王五' },
        { id: '3', name: '赵六' }
      ]
    }
  },
  actions: {
    changeCount(count) {
      this.count = count;
    },
    changeName(name) {
      this.name = name;
    }
  },
  persist: {
    key:"test",//唯一密钥
    paths: ["count","save.[]"],//部分持久状态、持久化整个状态
    storage: localStorage,//sessionStorage、localStorage
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/src/App.vue

<template>
  <div>
    {{ count }}
    <br />
    <n-button type="primary" @click="changeCount"> 修改count </n-button>
    <br />
    {{ name }}
    <br />
    <n-button type="primary" @click="changeName"> 修改name </n-button>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "../stores/index";
const state = useStore();
import { storeToRefs } from "pinia";
const { count,name } = storeToRefs(state);
const changeCount = () => {
  state.changeCount(666);
};
const changeName = () => {
  state.changeName("李四");
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26