1.用自己最喜欢的方式安装
2.main.js引入
3.创建store文件并配置内部的index.js文件
4.组件使用方法
5.重置store.$reset()
立即学习
“
前端免费学习笔记（深入）
”；
6.群体修改store.$patch,可以将pinia的数据进行同一修改
特点：批量修改但状态只刷新一次
综合实战（Vue3+Laravel8+Uniapp）课件
综合实战（Vue3+Laravel8+Uniapp）课件
下载
7.订阅修改
8.Getter
Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用：(ps:虽然鼓励但是依然提供了非es6玩家的使用方式 内部可以用this代表state)
9.Actions
在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)之所以提供这个功能 就是为了项目中的公共修改状态的业务统一
yarn add pinia
# 或者使用 npm
npm install piniaimport { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
import { createPinia } from 'pinia' //引入pinia
app.use(createPinia())
app.mount('#app')import { defineStore } from 'pinia' //引入pinia
//这里官网是单独导出 是可以写成默认导出的 官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const useCar=defineStore("test",{
state: () =>{
return ({
msg:"这是pinia",
name:"小小",
age:18
}) //为了避免出错，返回的值用()包起来
}
})
{{store.msg}}{{store.name}}{{store.age}}
{{store.msg}}{{store.name}}{{store.age}}
{{store.msg}}{{store.name}}{{store.age}}
//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次
store.$subscribe((mutation, state) => {
// 每当它发生变化时，将整个状态持久化到本地存储
localStorage.setItem('hello', JSON.stringify(state))
})//store/index.js文件
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
},
})
//组件中直接使用: Double count is {{ store.doubleCount }}
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
actions: {
increment() {
this.counter++//1.有this
},
randomizeCounter(state) {//2.有参数 想用哪个用哪个
state.counter = Math.round(100 * Math.random())
},
randomizeCounter(state) {
//异步函数.接口成功赋值
ajax.hplBaseApi("app/productSelection/categoryRows", {}, "post").then((res) => {
state.counter = res.data.length
});
}
},
})
//组件中的使用:
setup() {
const store = useStore()
store.increment()
store.randomizeCounter()
}