VUE3
项目npm init vite @latest
Pinia
npm install pinia
将Pinia
挂载到vue
实例
main.ts
import {createApp} from 'vue'
import App from './App.vue'
import {createPinia} from "pinia";
createApp(App)
.use(createPinia())
.mount('#app')
src
目录下新建story/index.ts
并配置import {defineStore} from "pinia";
export const useMainStore = defineStore('main', {
state: () => {
return {}
},
getters: {},
actions: {}
})
参数说明:
defineStore(容器唯一标识(会将其挂载到根容器),参数选项)
state:存储全局状态
getters:封装计算属性 具有缓存功能
actions:封装业务逻辑 修改state
index.ts
import {defineStore} from "pinia";
export const useMainStore = defineStore('main', {
state: () => {
return {
testPinia: '欢迎使用Pinia'
}
},
getters: {},
actions: {}
})
TestPinia.vue
App.vue
为什么要解构使用?
由于在模板中使用pinia
数据时,需要通过容器对象来拿到数据十分繁琐
所以将数据通过解构的方式使其只需要通过参数名就能直接拿到对应的值
TestPinia.vue
未解构
显示内容1:{{ mainStory.testPinia1 }}
显示内容2:{{ mainStory.testPinia2 }}
解构后
显示内容1:{{ testPinia1 }}
显示内容2:{{ testPinia2 }}
index.ts
import {defineStore} from "pinia";
export const useMainStore = defineStore('main', {
state: () => {
return {
testPinia: '欢迎使用Pinia',
testPinia1: '欢迎使用Pinia1',
testPinia2: '欢迎使用Pinia2'
}
},
getters: {},
actions: {}
})
存在问题:
使用解构的方式拿到的数据不是响应式的,而是一次性的
也就是当数据发生改变时不会自动改变
例如:当点击修改后,只有未解构的内容发改变,而结构后的不会改变
如何解决解构内容不更新问题?
使用Pinia
官方APIstoreToRefs
解决
storeToRefs:
将结构出来的数据用ref来代理响应式
未解构
显示内容1:{{ mainStory.testPinia1 }}
显示内容2:{{ mainStory.testPinia2 }}
解构后
显示内容1:{{ testPinia1 }}
显示内容2:{{ testPinia2 }}
mainStory.testPinia1 = '已更新';
mainStory.$patch({
testPinia1: '已更新1',
testPinia2: '已更新2',
})
mainStory.$patch(state => {
state.testArr.push(4)
})
import {defineStore} from "pinia";
export const useMainStore = defineStore('main', {
state: () => {
return {
testPinia: '欢迎使用Pinia',
testPinia1: '欢迎使用Pinia1',
testPinia2: '欢迎使用Pinia2',
testArr: [1, 2, 3, 4]
}
},
getters: {},
actions: {
changeState(val: string) {
this.testPinia1 = '通过action修改成功';
}, changeState2(val: string) {
this.testPinia1 = val;
}
}
})
mainStory.changeState();
mainStory.changeState2("你好");
注意:
在使用action定义函数时,不能使用箭头函数
箭头函数绑定的外部this 而在函数体中无法使用当前的this
getters是具有缓存功能的,在代码中连续实际只会执行一次
参数中的state是一个可选参数
getters: {
/*state:可选参数*/
addOne(state)
{
console.log("addOne被调用");
return state.count + 1;
}
}
{{ mainStory.addOne }}
{{ mainStory.addOne }}
{{ mainStory.addOne }}