defineStore( )
方法的第一个参数:容器的名字,名字必须唯一,不能重复
defineStore( )
方法的第二个参数:配置对象,放置state,getters,actions
state
属性: 用来存储全局的状态
getters
属性: 用来监视或者说是计算状态的变化的,有缓存的功能
actions
属性: 修改state全局状态数据,可以是异步也可以是同步
Pinia
可以用于vue2.x也可以用于vue3.x中
- 安装
yarn add pinia -S
main.js
引入
import {createApp} from "vue"
import App from "./app.vue"
import store from "./store/index.js"
const app = createApp(App);
import { createPinia } from "pinia";
const store = createPinia();
app.use(store).mount("#app")
- 在store文件夹下新建test.js
import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
state:()=>{
tname:"test",
tnum:0,
},
getters:{
changeTnum(){
console.log("getters")
this.tnum++;
}
},
actions:{
addNum(val){
this.tnum += val
}
},
//持久化存储配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
}
})
在用actions的时候,不能使用箭头函数,因为箭头函数绑定是外部的this。actions里的this指向当前store
- 在store文件夹下新建index.js,便于管理
import {createPinia} from "pinia"
const store = createPinia();
export default store
- 新建
A.vue
组件,引入store模块和storeToRefs
方法
storeToRefs
:解构store
中的数据,使之成为响应式数据
<template>
<div>
<div> {{tname}}</div>
<div> {{tid}}</div>
<div> tnum: {{tnum}}</div>
<div> {{tchangeNum}}</div>
<div><button @click="tchangeName">修改</button></div>
<div> <button @click="treset">重置</button></div>
<div @click="actionsBtn">actionsBtn</div>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store/user'
import { useTest } from '../store/test.js'
const testStore = useTest();
let { tname, tchangeNum, tnum } = storeToRefs(testStore)
</script>
三、直接修改数据的两种方式
直接修改数据与使用$path
修改数据相比,官方已经明确表示$patch
的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。所以如果你是多条数据同时更新状态数据,推荐使用$patch
方式更新。
虽然可以直接修改,但是出于代码结构来说, 全局的状态管理还是不要直接在各个组件处随意修改状态,应放于actions
中统一方法修改(piain没有mutation)。
//直接修改数据
tchangeName(){
tname.value = "测试数据";
tnum.value++;
}
//当然也可以使用`$path`批量修改
tchangeName(){
testStore.$path(state=>{
state.tname = "测试数据";
state.value = 7;
})
}
四、使用actions修改数据
直接调用actions
中的方法,可传参数
const actionsBtn = (){
testStore.addNum(5)
}
五、重置state中数据
store
中有$reset
方法,可以直接对store
中数据重置
const treset = (){
testStore.$reset()
}
六、Pinia持久化存储
- 实现持久化存储,需要配合以下插件使用
yarn add pinia-plugin-persist
- 配置
store
文件夹下的index.js
文件,引入pinia-plugin-presist
插件
import {createPinia} from "pinia"
import piniaPluginPresist from "pinia-plugin-presist"
const store = createPinia();
store.use(piniaPluginPresist)
export default store
- 配置stroe文件夹下的test.js文件,使用
presist
属性进行配置
import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
state:()=>{
tname:"test",
tnum:0,
},
getters:{
changeTnum(){
console.log("getters")
this.tnum++;
}
},
actions:{
addNum(val){
this.tnum += val
}
},
//持久化存储配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
### js基础
1)对js的理解?
2)请说出以下代码输出的值?
3)把以下代码,改写成依次输出0-9
4)如何区分数组对象,普通对象,函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别?
8)Web Worker 和webSocket?
9)Javascript垃圾回收方法?
10)new操作符具体干了什么呢?
11)js延迟加载的方式有哪些?
12)WEB应用从服务器主动推送Data到客户端有那些方式?
![js基础.PNG](https://img-blog.csdnimg.cn/img_convert/d9d1c6dfd62342b9c7629f3701c010ee.webp?x-oss-process=image/format,png)
![前16.PNG](https://img-blog.csdnimg.cn/img_convert/2fc0b4ed73ef1edbbc635d3626c7fd5c.webp?x-oss-process=image/format,png)
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别?
8)Web Worker 和webSocket?
9)Javascript垃圾回收方法?
10)new操作符具体干了什么呢?
11)js延迟加载的方式有哪些?
12)WEB应用从服务器主动推送Data到客户端有那些方式?
[外链图片转存中...(img-oBfqFwOR-1719234984336)]
[外链图片转存中...(img-TH97aDwq-1719234984337)]