概述
为什么要用 pinia？在前端开发过程中，我们需要进行本地内容存储，全局变量存储，此时如果只是用localstorage，开发过程中会比较繁琐，并且当遇到需要监听存储数据变化时，需要设置一些内容。但是如果使用了 pinia 以及 vuex 这些存储工具，会极大的减轻开发工作量。
使用
安装使用
安装下载
1
2
3
| yarn add pinia
# or with npm
npm install pinia
|
main.js 中引入
1
2
3
| import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app')
|
根目录新建 store/index.js 中写入
1
2
3
4
| <script setup>
import { useStore } from '../store'
const store = useStore();
</script>
|
State
定义 state
1
2
3
4
5
6
7
8
9
10
11
12
| import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
name: 'Eduardo',
isAdmin: true,
}
},
getters:{},
actions:{}
})
|
使用 state
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<div>
<h1>
A组件
</h1>
{{ name }}
</div>
</template>
<script setup>
import { useStore } from '../store'
const store = useStore();
let { name } = store;
</script>
|
组件修改pinia的state数据
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
| <template>
<div>
<h1>A组件</h1>
{{ name }} <button @click="btn">按钮</button>
</div>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { useStore } from "../store";
const store = useStore();
let { name } = storeToRefs(store);
const btn = () => {
name.value = "123";
};
</script>
|
如果state数据需要批量更新
store/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
name: 'Eduardo',
arr:['a','b','c']
}
},
getters:{},
actions:{}
})
|
使用$patch进行批量更新
actions
actions就比较简单了，写入方法，比如我们可以让state中的某一个值+=，而且传入参数
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
| import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0
}
},
getters:{},
actions:{
changeCounter( val ){
this.counter += val;
}
}
})
|
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
| <template>
<div>
<h1>A组件</h1>
{{ counter }}
<button @click='add'>加10</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter } = storeToRefs(store);
const add = ()=>{
store.changeCounter(10);
}
</script>
|
getters
getters和vuex的getters几乎类似，也是有缓存的机制
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
| import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
}
},
getters:{
counterPar( ){
console.log(111);
return this.counter + 100;
}
},
actions:{}
})
|
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
| <template>
<div>
{{ counterPar }}
{{ counterPar }}
{{ counterPar }}
<h1>A组件</h1>
{{ counter }}
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter, counterPar } = storeToRefs(store);
</script>
|
