Vue3 pinia 的使用
Vue3 Pinia 使用
2023-09-27 14:27:48 时间
yarn add pinia
引入后导入main.ts
import {createApp} from 'vue'
// import './style.css'
import App from './App.vue'
import CardVue from './components/Card.vue'
import {createPinia} from "pinia";
const store=createPinia()
export const app = createApp(App)
app.component('CardVue', CardVue)
app.use(store)
app.mount('#app')
使用
先创建俩这个文件
export const enum Names{
TEST='test'
}
import {defineStore} from "pinia";
import {Names} from "./store-name";
export const useTestStore = defineStore(Names.TEST, {
state: () => {
return {
current: 10,
name: "anguo"
}
},
//类似 computed 修饰一些数值
getters: {},
//类似 methods 可以做同步异步 提交state
actions: {
setCurrent() {
this.current = 999
}
}
})
内容如下
使用
<template>
<div>
pinia:{{ Test.current }} -- {{ Test.name }}
<button @click="change">change</button>
</div>
<div>
pinia:{{ current }} -- {{ name }}
</div>
</template>
<style scoped>
#app, html, body {
height: 100%;
}
* {
padding: 0;
margin: 0;
}
.tabs {
border: 1px solid #CCC;
padding: 5px 10px;
margin: 10px;
cursor: pointer;
}
.active {
background: skyblue;
}
</style>
<script setup lang="ts">
import {useTestStore} from "./store";
import {storeToRefs} from "pinia";
const Test = useTestStore()
//默认不具有响应式,如果想要响应式需要包裹一下storeToRefs
const {current, name} = storeToRefs(Test)
const change = () => {
//修改painia的值 的五种方法
//第一种 可以直接进行修改
// Test.current++
// Test.name = '我是谁'
//第二种修改方式
// Test.$patch({
// current: Test.current + 1,
// name: '我是谁'
// })
//第三种修改方式
// Test.$patch((state) => {
// state.current++
// state.name = '我是谁'
//
// })
//第四种修改方式 修改整个对象 不是很推荐 缺陷要修改所有值
// Test.$state = {
// current: 2000,
// name: "1324"
// }
//第五种 借助action去修改
// Test.setCurrent()
//对对象进行解构 不具有响应式的 可以使用storeToRefs 对其进行包裹然后就具有响应式了
Test.current++
current.value++
console.log(current, name)
}
</script>
效果
针对异步的修改,actions的方法可以互相调用
index.ts
import {defineStore} from "pinia";
import {Names} from "./store-name";
type User = {
name: string,
age: number
}
let result: User = {
name: "anguo",
age: 18
}
const Login = (): Promise<User> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(result)
}, 2000)
})
}
export const useTestStore = defineStore(Names.TEST, {
state: () => {
return {
user: <User>{},
name: "defalut name",
}
},
//类似 computed 修饰一些数值
getters: {},
//类似 methods 可以做同步异步 提交state
actions: {
//同步修改
setUser() {
this.user = result;
},
//异步修改
async setUserAsync() {
const result = await Login()
this.user = result
this.setName("new name")
},
setName(name: string) {
this.name = name
}
}
})
App.vue
<template>
<div>
<p>actions-users:{{ Test.user }}</p>
<hr>
<p>actions-name:{{ Test.name }}</p>
<hr>
<p>getters:</p>
<hr>
<button @click="change">change</button>
</div>
</template>
<style scoped>
#app, html, body {
height: 100%;
}
* {
padding: 0;
margin: 0;
}
.tabs {
border: 1px solid #CCC;
padding: 5px 10px;
margin: 10px;
cursor: pointer;
}
.active {
background: skyblue;
}
</style>
<script setup lang="ts">
import {useTestStore} from "./store";
import {storeToRefs} from "pinia";
const Test = useTestStore()
//默认不具有响应式,如果想要响应式需要包裹一下storeToRefs
const change = () => {
//同步
// Test.setUser()
//异步
Test.setUserAsync()
}
</script>
getters
import {defineStore} from "pinia";
import {Names} from "./store-name";
type User = {
name: string,
age: number
}
let result: User = {
name: "anguo",
age: 18
}
const Login = (): Promise<User> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(result)
}, 2000)
})
}
export const useTestStore = defineStore(Names.TEST, {
state: () => {
return {
user: <User>{},
name: "defalut name",
}
},
//类似 computed 修饰一些数值
getters: {
getName(): string {
return `$-${this.name}-${this.getUserAge}`
},
getUserAge(): number {
return this.user.age
}
},
//类似 methods 可以做同步异步 提交state
actions: {
//同步修改
setUser() {
this.user = result;
},
//异步修改
async setUserAsync() {
const result = await Login()
this.user = result
this.setName("new name")
},
setName(name: string) {
this.name = name
}
}
})
app.vue
<template>
<div>
<p>actions-users:{{ Test.user }}</p>
<hr>
<p>actions-name:{{ Test.name }}</p>
<hr>
<p>getters:{{ Test.getName}}</p>
<hr>
<button @click="change">change</button>
</div>
</template>
<style scoped>
#app, html, body {
height: 100%;
}
* {
padding: 0;
margin: 0;
}
.tabs {
border: 1px solid #CCC;
padding: 5px 10px;
margin: 10px;
cursor: pointer;
}
.active {
background: skyblue;
}
</style>
<script setup lang="ts">
import {useTestStore} from "./store";
import {storeToRefs} from "pinia";
const Test = useTestStore()
//默认不具有响应式,如果想要响应式需要包裹一下storeToRefs
const change = () => {
//同步
// Test.setUser()
//异步
Test.setUserAsync()
}
</script>
相关文章
- 尚硅谷Vue3(天禹老师主讲)的笔记
- vue3渲染函数(h函数)的变化
- vue3中mixins的使用
- Vue3中ref和toRef的区别
- Vue3中使用toRefs对数据进行解构
- Vue3基础(九)___computed
- Vue3基础(七)__shallowReactive
- vue3--学习技术胖笔记----第四波外部方法or比变量调用
- vue3笔记
- 端午总结Vue3中computed和watch的使用
- Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
- 就这几行代码搭建最小Vue3.x项目
- vue3 组合式API 逻辑拆分,再也不怕同事说我代码烂了
- vue3 超好用的富文本编辑器
- 【vue3】关于ref、toRef、toRefs那些事
- 【vue3】组合式API之setup()介绍与reactive()函数的使用
- vue3:组件如何通过v-model绑定数据