目录
一、概念
1. Pinia => Pinia
Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近piña（西班牙语中的菠萝）的词
- Pinia开始于大概2019年，最初是作为一个实验为Vue重新设计状态管理，让它用起来像组合式API（Composition API）
- 从那时到现在，最初的设计原则依然是相同的，并且目前同时兼容Vue2、Vue3，也并不要求你使用Composition API
- Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）
2. Pinia和Vuex的对比
01 - 不是已经有Vuex了吗？为什么还要用Pinia
- Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法
- 最终，团队意识到Pinia已经实现了Vuex5中大部分内容，所以最终决定用Pinia来替代Vuex
- 与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的仪式，提供了 Composition-API 风格的 API
- 最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持
02 - 和Vuex相比，Pinia有很多的优势
- mutations 不再存在
- 他们经常被认为是 非常 冗长
- 他们最初带来了 devtools 集成，但这不再是问题
- 更友好的TypeScript支持，Vuex之前对TS的支持很不友好
- 不再有modules的嵌套结构
- 可以灵活使用每一个store，它们是通过扁平化的方式来相互使用的
- 也不再有命名空间的概念，不需要记住它们的复杂关系
- Pinia的store中的 getters、actions 可以使用this，this代表当前sotre对象
二、使用Pinia
1. 安装
npm install pinia2. 创建Pinia
创建stores文件夹，并在其中创建个index.js
-
// 1. 导入
-
import { createPinia }
from
'pinia';
-
-
// 2. 创建
-
const pinia =
createPinia();
-
-
// 3. 导出
-
export
default pinia;
3. 在main.js中引入
-
import { createApp }
from
'vue';
-
import
App
from
'./App.vue';
-
// 1. 导入
-
import pinia
from
'./stores';
-
// 2. use一下
-
createApp(
App).
use(pinia).
mount(
'#app');
三、Store
1. 概念
Store :
- 一个 Store （如 Pinia）是一个实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态
- 它有点像始终存在，并且每个人都可以读取和写入的组件
- 你可以在你的应用程序中定义任意数量的Store来管理你的状态
Store有三个核心概念 :
- state、getters、actions
- 等同于组件的data、computed、methods
- 一旦 store 被实例化，可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性
2. 创建
定义一个Store :
- Store 是使用 defineStore() 定义
- 并且它需要一个唯一名称，作为第一个参数传递
在stores文件夹创建 counter.js 文件
-
// 1, 导入
-
import { defineStore }
from
'pinia';
-
// 2. 创建一个store
-
/**
-
* 第一个参数 : 唯一的名称
-
* 第二个参数 : 传入配置
-
* 返回值 : 返回一个函数，调用这个函数，即可拿到当前store
-
*/
-
const userCounterStore =
defineStore(
'counterStore', {
-
state:
() => ({
-
count:
66
-
})
-
});
-
-
export
default userCounterStore;
3. 使用
-
<template>
-
<div class="app">App 页面
</div>
-
<h2>1. counterStore : {{ counterStore.count }}
</h2>
-
<h2>2. toRefs : {{ aCount }}
</h2>
-
<h2>3. storeToRefs : {{ bCount }}
</h2>
-
-
<button @click="changCount">改变count
</button>
-
</template>
-
-
<script setup>
-
import { toRefs }
from
'vue';
-
import { storeToRefs }
from
'pinia';
-
// 1. 导入该函数
-
import userCounterStore
from
'@/stores/module/counter';
-
-
// 2. 调用，获得store
-
const counterStore =
userCounterStore();
-
-
// 3. 拿到state值
-
/**
-
* 注意 : 直接解构可以拿到值，但并不是响应式的了
-
* 1. 使用 toRefs
-
* 2. 使用pinia提供的 storeToRefs
-
*/
-
// toRefs
-
const {
count: aCount } =
toRefs(counterStore);
-
// storeToRefs
-
const {
count: bCount } =
storeToRefs(counterStore);
-
-
// 监听点击
-
const
changCount = (
) => {
-
// 可以直接操作！！！
-
counterStore.
count++;
-
};
-
</script>
4. 效果
四、核心概念State
1. 定义State
-
// 1, 导入
-
import { defineStore }
from
'pinia';
-
// 2. 创建一个store
-
/**
-
* 第一个参数 : 唯一的名称
-
* 第二个参数 : 传入配置
-
* 返回值 : 返回一个函数，调用这个函数，即可拿到当前store
-
*/
-
const userCounterStore =
defineStore(
'counterStore', {
-
state:
() => ({
-
count:
66,
-
name:
'coder',
-
age:
19
-
})
-
});
-
-
export
default userCounterStore;
2. 读取写入State
默认情况下，可以通过 store 实例访问状态来直接读取和写入状态
-
<script setup>
-
import
Home
from
'./views/Home.vue';
-
// 1. 导入该函数
-
import { toRefs }
from
'vue';
-
import { storeToRefs }
from
'pinia';
-
import userCounterStore
from
'@/stores/module/counter';
-
-
// 2. 调用，获得store
-
const counterStore =
userCounterStore();
-
// 3. 拿到state值
-
const { count } =
storeToRefs(counterStore);
-
-
// 监听点击
-
const
changCount = (
) => {
-
// 1. 读取
-
console.
log(counterStore.
count);
-
// 2. 写入
-
counterStore.
count++;
-
};
-
</script>
3. 重置State
可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值
-
// 重置
-
const
resetState = (
) => {
-
// 回到初始值
-
counterStore.$reset();
-
};
4. 改变State
除了直接用 store.counter++ 修改 store，还可以调用 $patch 方法
允许同时应用多个更改
-
// 监听点击
-
const
changCount = (
) => {
-
// 一起更改数据
-
counterStore.$patch({
-
count:
99,
-
name:
'star',
-
// 如果输入新增的属性，没有用哒！
-
buy:
ref(
'abvc')
-
});
-
console.
log(counterStore);
-
};
5. 替换State
可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态
五、核心概念Getters
1. 基本使用
代码
-
const userCounterStore =
defineStore(
'counterStore', {
-
state:
() => ({
-
count:
66,
-
name:
'coder',
-
age:
19
-
}),
-
getters: {
-
// 1. 定义getterts
-
doubleCount(
state) {
-
// 2. 通过state参数拿到count
-
console.
log(state.
count);
-
// 3. 通过this拿到参数
-
console.
log(
this.
count);
-
}
-
}
-
});
使用
-
<template>
-
<div>home
</div>
-
<h2>count : {{ counterStore.count }}
</h2>
-
<hr />
-
<h2>count : {{ counterStore.doubleCount }}
</h2>
-
-
<button @click="changCount">改变count
</button>
-
</template>
-
-
<script setup>
-
import { toRefs }
from
'vue';
-
import userCounterStore
from
'@/stores/module/counter';
-
// 1. 获取store
-
const counterStore =
userCounterStore();
-
// 2. 解构，变成响应式
-
const { doubleCount } =
toRefs(counterStore);
-
console.
log(doubleCount);
-
-
// 监听点击
-
const
changCount = (
) => {
-
// 3. 改变store
-
counterStore.
count++;
-
// 4. 输出
-
console.
log(doubleCount.
value);
-
};
-
</script>
2. 在getter中使用其他的getter
-
getters: {
-
doubleCount(
state) {
-
return
this.
count *
2;
-
},
-
othersGetter(
) {
-
// 通过this来拿
-
return
this.
doubleCount;
-
}
-
}
3. getters支持返回一个函数
可以用来传递参数到getters
代码
-
getters: {
-
doubleCount(
state) {
-
return
this.
count *
2;
-
},
-
formatName(
) {
-
// 返回一个函数，可以传递参数进来
-
return
(lastName) => {
-
return
this.
name + lastName;
-
};
-
}
-
}
使用
-
<template>
-
<h2>{{ counterStore.formatName('123') }}
</h2>
-
<button @click="changCount">改变count
</button>
-
</template>
-
-
<script setup>
-
import { toRefs }
from
'vue';
-
import userCounterStore
from
'@/stores/module/counter';
-
// 1. 获取store
-
const counterStore =
userCounterStore();
-
// 2. 解构，变成响应式
-
const { formatName } =
toRefs(counterStore);
-
-
const
changCount = (
) => {
-
// 3. 使用函数
-
console.
log(formatName.
value(
'444'));
-
// 也可以直接使用，看情况而定
-
counterStore.
formatName(
'123')
-
};
-
</script>
4. getters使用别的store中的数据
导入其他的store，使用即可，很方便
-
userOtherStore(
){
-
// 1. 导入其他soter
-
const otherStore =
userOtherStore()
-
// 2. 拿到数据 ....
-
otherStore.
getters()
-
}
六、核心概念Actions
actions => 非常适合定义业务逻辑
1. 基本使用
代码
-
const userCounterStore =
defineStore(
'counterStore', {
-
state:
() => ({
-
count:
66,
-
name:
'coder',
-
age:
19
-
}),
-
actions: {
-
increment(
) {
-
this.
count++;
-
},
-
// 这里的参数指调用时传递过来的参数
-
incrementNum(
num) {
-
this.
count += num;
-
}
-
}
-
});
使用
-
<script setup>
-
import userCounterStore
from
'@/stores/module/counter';
-
// 1. 获取store
-
const counterStore =
userCounterStore();
-
// 2. 解构
-
const { increment, incrementNum } = counterStore;
-
// 3. 调用
-
increment();
-
incrementNum(
33);
-
</script>
2. 异步操作
代码
-
const userCounterStore =
defineStore(
'counterStore', {
-
state:
() => ({
-
arrList: []
-
}),
-
actions: {
-
async
fetchDataList(
) {
-
// 1. 请求
-
const res =
await
fetch(
'http:xxxxx');
-
const data =
await res.
json();
-
this.
arrList = data.
list;
-
// 2. 返回值，相当于 return Promise.resolve(data)
-
return data;
-
}
-
}
-
});
使用
-
<script setup>
-
import userCounterStore
from
'@/stores/module/counter';
-
// 1. 获取store
-
const counterStore =
userCounterStore();
-
// 2. 解构
-
const { fetchDataList } = counterStore;
-
// 3. 调用
-
fetchDataList().
then(
(res) => {
-
// 因为返回的时promise，所以可以在then中拿到数据
-
console.
log(res);
-
});
-
</script>
转载：https://blog.csdn.net/a15297701931/article/details/127313509
查看评论