Vue状态管理,vue状态管理有哪些方法
Vue3公布曾经有一段时间了，它采纳了新的响应式零碎，而且构建了一套全新的CompositionAPI，下面这篇文章主要给大家介绍了关于Vue3新状态管理工具的相关资料，需要的朋友可以参考下
目录
前言安装创建存储状态定义状态获取状态修改stateGettersActions异步动作动作间相互调用数据持久化安装使用自定义键持久化部分状态最后
前言
Pinia.js是新一代的状态管理器，由vue。j团队中成员所开发的，因此也被认为是下一代的Vuex，即Vuex5.x，在Vue3.0的项目中使用也是备受推崇。
Pinia.js有如下特点：
完整的以打字打的文件的支持；足够轻量，压缩后的体积只有1.6kb去除突变，只有状态、获取器、动作（这是我最喜欢的一个特点);行动支持同步和异步；没有模块嵌套，只有商店的概念，商店之间可以自由使用，更好的代码分割；无需手动添加商店，商店一旦创建便会自动添加；
安装
新公共管理安装皮尼亚-保存
创建 Store
新建src/商店目录并在其下面创建index.ts，导出商店
//src/store/index.ts
从“皮尼亚”导入{ createPinia }
const store=createPinia()
导出默认存储
在主页面中引入并使用。
//src/main.ts
从“vue”导入{ createApp }
从导入应用程序 App.vue
从导入存储。/商店
const app=createApp(App)
app.use(商店)
State
定义State
在src/商店下面创建一个user.ts
//src/store/user.ts
从“皮尼亚”导入{ defineStore }
export const use user store=defineStore({
id:"用户"，//id必填，且需要唯一
状态：()={
返回{
名称： 小小荧
}
}
})
获取 state
模板
div{{ userStore.name }}/div
/模板
脚本语言设置
从" @/商店/用户"导入{ useUserStore }
const userStore=useUserStore()
/脚本
也可以结合计算获取。
const name=computed(()=用户存储。姓名)
状态也可以使用解构，但使用解构会使其失去响应式，这时候可以用皮尼亚的storeToRefs。
从“皮尼亚”导入{ storeToRefs }
const { name }=storeToRefs(用户存储)
修改 state
可以像下面这样直接修改状态
userStore.name=李四
但一般不建议这么做，建议通过行动去修改状态，动作里可以直接通过这访问。
export const use user store=defineStore({
id:"用户",
状态：()={
返回{
名称： 张三
}
},
动作：{
updateName(name) {
this.name=name
}
}
})
脚本语言设置
从" @/商店/用户"导入{ useUserStore }
const userStore=useUserStore()
userStore.updateName(李四)
/脚本
Getters
export const use user store=defineStore({
id:"用户",
状态：()={
返回{
名称： 张三
}
},
getters: {
全名：(州)={
返回州名丰
}
}
})
userStore.fullName //小小荧丰
Actions
异步 action
行为可以像写一个简单的函数一样支持异步/等待的语法，让你愉快的应付异步处理的场景。
export const use user store=defineStore({
id:"用户",
动作：{
异步登录（帐户，密码){
const { data }=等待API。登录(帐户，密码)
返回数据
}
}
})
action 间相互调用
行为间的相互调用，直接用这访问即可。
export const use user store=defineStore({
id:"用户",
动作：{
异步登录（帐户，密码){
const { data }=等待API。登录(帐户，密码)
this.setData(data) //调用另一个行为的方法
返回数据
},
setData(数据){
console.log(数据)
}
}
})
在行为里调用其他商店里的行为也比较简单，引入对应的商店后即可访问其内部的方法了。
//src/store/user.ts
从导入{ useAppStore } ./app
export const use user store=defineStore({
id:"用户",
动作：{
异步登录(帐户，密码){
const { data }=await API . log in(account，pwd)
const appStore=useAppStore()
AppStore . setdata(data)///调用app store中的action方法
返回数据
}
}
})
//src/store/app.ts
export const use app store=defineStore({
id:“应用程序”，
动作：{
setData(数据){
console.log(数据)
}
}
})
数据持久化
插件pinia-plugin-persist可以帮助实现数据持久化功能。
安装
NPM I pinia-插件-持久化-保存
使用
//src/store/index.ts
从“Pinia”导入{ createPinia }
从“pinia-plugin-persist”导入piniaPluginPersist
const store=createPinia()
store.use(piniaPluginPersist)
导出默认存储
然后在相应的存储中打开persist。
export const use user store=defineStore({
id:“用户”，
状态：()={
返回{
姓名：“张三”
}
},
//打开数据缓存
持续：{
启用：真
}
})
默认情况下，数据将存储在sessionStorage中，存储的id将用作键。
自定义 key
您还可以自定义策略中的键值，并将存储位置从sessionStorage更改为localStorage。
持续：{
启用：真，
策略：[
{
关键字：“我的用户”，
存储：本地存储，
}
]
}
持久化部分 state
所有默认状态都将被缓存，您可以通过路径指定要持久化的字段，而其他字段则不会持久化。
状态：()={
返回{
姓名：张三，
年龄：18，
性别：“男性”
}
},
持续：{
启用：真，
策略：[
{
存储：本地存储，
路径：[姓名，年龄]
}
]
}
上面，我们只持久化了姓名和年龄，并将它们更改为localStorage，但是不会持久化性别。如果它的状态改变了，页面刷新时就会丢失，会回到初始状态，而姓名和年龄不会。
最后
以上是关于Pinia.js用法的一些介绍，pinia.js的内容远不止这些，更多的内容和用法需要大家自己去探索。皮尼亚文件
关于Vue3新的状态管理工具的这篇文章就到这里。关于Vue3新的状态管理工具的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。