state、actions、getters
对ts支持好
vuex和pinia区别
1. Vuex`的核心概念有：`state`,`getters`,`mutations`,`actions`,`moudles`五个部分
2. `Pinia`的核心概念有：`state`,`getter`,`action`三个部分3. `Vuex`对state的修改推荐使用`mutations`中的方法进行修改,
4. `Pinia`直接对state进行修改5. Pinia中 getter，action 也可通过 `this` 访问整个 store 实例
安装：npm install pinia
main.js
// 导入createApp函数
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'// 创建pinia实例
const pinia = createPinia()// 创建App实例挂载到id为app的dom元素
const app = createApp(App)
app.use(pinia)app.mount('#app')
store/user.js
// 定义用户仓库
import { defineStore } from 'pinia'
// defineStore() 创建store实例的函数
// 第一个参数 store的唯一标识 类似于模块
// 第二个参数 对象描述仓库可以提供state getters actions
// 返回值 是创建store实例的方法
// 规范 useXXXXStore
const useUserStore = defineStore('user',{// state getters actionsstate: ()=> {return {userInfo: {username: 'admin',age: 20}}},//转成大写getters:{upperCase(){return this.userInfo.username.toUpperCase()}},//同步异步都可以actions:{change(){this.userInfo.username="香香"}}
})
//导出
// 导出user仓库实例的方法
export default useUserStoreApp.vue
<template><div><button @click="change">按钮</button><p>{{ userStore.userInfo.username }}</p><button @click="userStore.change">第二种方式</button><!-- 变成大写 --><p>{{ userStore.upperCase }}</p></div>
</template><script setup>
import useUserStore from './store/user'
const userStore =useUserStore ()
console.log(userStore)
const change=()=>{userStore.change()
}
</script><style></style>
pinia模块化
如果有多个模块ia，就需要导入很多，代码会很臃肿，所以在一个模块实现，app.vue只需要导入一次就能拿到值'
store/index.js'
import useUserStore from "./user";
import useCounterStore from "./counter";export default function useStore() {return {user: useUserStore(),counter: useCounterStore()}
}在App.vue
<template><p>{{store.counter.num}}</p>
</template>
//导入
import useStore from './store/index.js'
//调用赋值
const store=useStore()
