wordpress服务器,seo快速排名软件价格,南京装修公司做网站,杭州网站建设ttmwl介绍
提供跨组件和页面的共享状态能力#xff0c;作为Vuex的替代品#xff0c;专为Vue3设计的状态管理库。
Vuex#xff1a;在Vuex中#xff0c;更改状态必须通过Mutation或Action完成#xff0c;手动触发更新。Pinia#xff1a;Pinia的状态是响应式的#xff0c;当状…介绍
提供跨组件和页面的共享状态能力作为Vuex的替代品专为Vue3设计的状态管理库。
Vuex在Vuex中更改状态必须通过Mutation或Action完成手动触发更新。PiniaPinia的状态是响应式的当状态发生变化时组件会自动更新无需手动触发。 官方文档 https://pinia.vuejs.org/zh/getting-started.html 使用Pinia对用户的登录信息进行保存
安装
npm install pinia引入
import { createApp } from vue
import App from ./App.vue
import { createPinia } from pinia
const app createApp(App)
app.use(createPinia())
app.mount(#app)定义Stroe
目录结构src/store/user.js
import {defineStore} from pinia
import {reactive, ref} from vue;
//导入pinia//user表示模块名
export const useUser defineStore(user,(){//定义数据(state)dconst userIdref(6699)//用户IDconst level ref(10) //等级const userMsgreactive({token:addadgsadadadada,phone:13111111111,age:13})//用户信息const list ref([])//操作数据的函数(action 同步异步)const updateUser(newUserId){userId.valuenewUserId}//修改账号信息//数据返回出去 注对象的形式return{userId,updateUser,userMsg}
})读取Stroe
templateh1用户ID{{userStore.userId}}/h1h1用户信息{{userStore.userMsg}}/h1
/templatescript setup
import {useUser} from /store/user.js;
//导入storeconst userStore useUser()
//得到 user 模块返回的对象
/script读取成功
修改Stroe
script setup
import {useUser} from /store/user.js;
//导入storeconst userStore useUser()
//得到 user 模块返回的对象function updateUser(){userStore.updateUser(1334)
}
/scriptAction异步
Store
// src/store/user.jsconst getListasync (){const res await axios.get(https://tools.mgtv100.com/external/v1/bank_names).then(r{list.valuer.data.data})}组件 div v-foritem in userStore.list :keyitem.id{{item.bank_name}}/divonMounted((){getList()
})function getList(){userStore.getList()
}Getter计算
templateh1计算后等级 {{userStore.cmpLevel}}/h1
/templatesrc/store/user.js
//getterconst cmpLevelcomputed((){return level.value*2//该函数用来计算等级})return {cmpLevel}
// src/store/user.js
