Vue3 使用pinia
发布时间
阅读量：
阅读量
文章目录
-
-
-
- 什么是pinia
-
- 为什么使用pinia
- 安装pinia
- 添加到vue
- 状态管理定义
- 使用
-
什么是pinia
可以理解为状态管理工具
为什么使用pinia
处理状态传递相关的问题
存在一种状态变量或数据字段可供多个组件调用或访问
当某个组件发生状态更新时, 该更新会被传播到依赖于它的其他组件中
安装pinia
npm install pinia --save-dev添加到vue
引入pinia的创建方法
创建pinia
通过use添加到vue
import {createApp} from 'vue'
import App from './App.vue'
import router from "./router"
import createHttp from "@/http";
import vueLazyLoad from "vue3-lazy"
# 引入创建pinia方法
import { createPinia } from 'pinia'
const vueApp = createApp(App)
vueApp.config.globalProperties.$axios = createHttp()
vueApp.use(vueLazyLoad, {
loading: require('./assets/audio.svg'),
error: require('./assets/audio.svg'),
})
# 使用创建好的pinia
vueApp.use(createPinia())
vueApp.use(router).mount('#app')状态管理定义
store.js
# 从pinia中引入定义方法
import {defineStore} from 'pinia'
# storeId 标识
const userStore = defineStore('storeId', {
# 定义状态
state: () => {
return {
name: 'Eduardo',
}
},
})
# 导出定义好的store
export default userStore使用
<template>
<a class="login">{{name}}</a>
<a class="register" @click="setName">注册</a>
</template>
<script>
import userStore from "../store";
export default {
name: "TestPage",
computed: {
name() {
# 读取name值
return userStore().name;
},
},
methods: {
setName() {
#改变name值
userStore().name = "xrx";
},
},
}
</script>全部评论 (0)
还没有任何评论哟~