1.pinia是什么
pinia是vuex的升级版，来实现状态管理。在Vue2中使用vuex实现状态管理，那么Vue3中使用pinia实现状态管理
2.pinia的优点
1.pinia中只有state、getter、action，抛弃了mutation
2.pinia中action支持同步和异步
3.良好的Typescript支持
4.体积非常小，只有1KB左右。
5..……
3.使用
3.1.安装
npm install pinia
如报错就加上--legacy-peer-deps
npm install pinia --legacy-peer-deps
3.2.引用
// main.ts
import { createPinia } from "pinia";
const pinia = createPinia();
createApp(App).use(pinia).mount("#app");
3.3.创建store
和vuex一样，创建store文件夹，在创建子文件，user.ts
调用pinia中的defineStore函数即可，该函数接收两个参数：
- name：一个字符串，必传项，该store的唯一id。
- options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
// store/user.ts
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id,用于区分不用的这样就不同分层了
export const useUsersStore = defineStore('users', {
// 其它配置项
})
4.state
4.1 使用store
// src/App.vue
<script setup lang="ts">
import { useUsersStore } from "@/src/store/user";
const store = useUsersStore();
console.log(store);
</script>
4.2 添加state
state用来存储一下基本数据
export const useUsersStore = defineStore('users', {
state: () => {
return{
name: "foo",
age:18
}
}
})
state接收的是一个箭头函数返回的值，它不能直接接收一个对象。
4.3 使用state
import { useUsersStore } from "@/store/user";
const store = useUsersStore();
console.log(store.name);
console.log(store.age);
//当然也可以解构使用
4.4 修改state
<template>
<div id="app">
{{ store.name }}
<button @click="changeName">改变name</button>
</div>
</template>
<script lang="ts" setup>
import { useUsersStore } from "@/store/user";
const store = useUsersStore();
const changeName = () => {
store.name = "bar";
};
</script>
注意：不使用解构的写法，name是响应式，若我们想使用解构的写法，又想是响应式的，则需要使用storeToRefs函数
<template>
<div id="app">
{{ name }}
<button @click="changeName">改变name</button>
</div>
</template>
<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useUsersStore } from "@/store/user";
const store = useUsersStore();
//使用storeToRefs来解构
const { name } = storeToRefs(store);
const changeName = () => {
store.name = "bar";
};
</script>
4.5 修改多个stare变量
使用store.$patch()
const changeName = () => {
store.$patch({
name: "bar",
age: 20,
});
};
4.6 重置state
将starte重置为初始状态
store.$reset()
5.getter
getter和Vue2中的计算属性类似，对state中的数据进行计算并返回一个新结果
5.1 添加getter
import { defineStore } from "pinia";
export const useUsersStore = defineStore('users', {
state: () => {
return{
name: "foo",
age: 18,
}
},
getters: {
addAge:(state)=>{
return state.age+10
}
}
})
5.2使用getters
直接在模板中调用即可
<template>
<div id="app">
{{ store.addAge }}
</div>
</template>
5.3 getter中调用其它getter
通过this可以调用其他getter,但是调用的函数不能使用箭头函数！
export const useUsersStore = defineStore('users', {
state: () => {
return{
name: "foo",
age: 18,
}
},
getters: {
addAge:(state)=>{
return state.age+10
},
addAges(){
return 100+this.addAge
}
}
})
6.actions
actions和Vue2中的methods类似，可以存放业务逻辑
6.1 添加actions
import { defineStore } from "pinia";
export const useUsersStore = defineStore('users', {
state: () => {
return{
name: "foo",
}
},
,
actions: {
changeName(value) {
this.name=value
}
}
})
6.2使用actions
const handle = () => {
store.changeName("bar ");
};
