pinia：状态管理工具，相比于Vuex，pinia上手简单，能够更好的检测异步数据的变化，
和Vue3+ts结合使用，一个字：爽

如何使用Pinia

第一步：安装pinia,使用如下命令

  1. npm i pinia

第二步
在src文件夹下新建stores文件夹，此文件夹用来存放数据的状态、公共数据，具体实现如下

  1. // 在stores文件中新建一个index.ts文件,写入一下代码
  2. // 创建大store
  3. // 导入pinia
  4. import { createPinia } from 'pinia'
  5. const pinia = createPinia()
  6. // 暴露出去
  7. export default pinia
  9. // 在main.ts中进行注册使用
  10. import pinia from '@/stores'
  11. app.use(pinia)

创建小store，例如用户信息user.ts

  1. // 导入创建小store的包
  2. import {definePinia} from 'pinia'
  4. // 定义一个store
  5. const useUserStore = definePinia('User',{
  6.     state:()={
  7.         return {}
  8.     },
  9.     action:{
  10.         // 进行异步操作
  11.         // 如发请求、拿数据
  12.     },
  13.     getter:{
  14.         // 类似于计算属性，可以对获取到的数据进行处理
  15.     }
  16. })
  18. // 暴露
  20. export default useUserStore
  22. // 在组件中使用
  23. // 比如在login.vue中使用store中的数据
  24. import useUserStore from '@/stores/user'
  25. const userStore = useUserStore()
  27. // 调用store中的方法
  28. userStore.userLogin()

总结：在vue中，任何一个第三方工具的使用，都可以理解为以下步骤

安装—>定义 —> 注册 —> 使用,包括Vuex状态管理工具的使用、路由的使用

Vuex的使用

同pinia一样，也是一个状态管理工具，和Vue2结合使用，一个字：香

  1. // 安装Vuex
  2. npm i vuex
  3. // // 在stores文件中新建一个index.ts文件,写入一下代码
  4. // 总的store
  5. import { createApp } from 'vue'
  6. import { createStore } from 'vuex'
  7. import user from './modules/user'
  8. Vue.use(Vuex)
  10. const store = Vuex.Stroe({
  11.     modules:{
  12.         // 其他分store
  13.         user
  14.     }
  15. })
  17. // 其他小store
  18. const user = {
  19.     namespace:true,//开启命名空间
  20.     state:{
  21.         // 存放状态数据
  22.         categoryList: []
  23.     },
  24.     mutations:{
  25.         // 直接更新数据
  26.         saveCategoryList(state, params) {
  27.             // 可以对数据进行截取
  28.       state.categoryList = params.slice(0, 15)
  29.     }
  30.     },
  31.     actions:{
  32.         // 异步更新数据
  33.         async getCategoryList(context) {
  34.       // 调用 API 获取数据
  35.       const res = await reqCategoryList()
  37.       // 判断后端返回的业务状态码
  38.       // 业务状态码：是后端返回的标识，用来标识数据是否返回正常
  39.       // 如果返回是的 200，说明数据返回正常
  40.       // 如果返回不是 200，说明数据异常
  41.       if (res.code === 200) {
  42.         context.commit('saveCategoryList', res.data)
  43.       }
  44.     },
  45.     },
  46.     getter：{
  47.         // 类似于计算属性
  48.     }
  49. }
  50. // 导出store
  51. export default user
  53. // 注意：此模块中的namespace可以研究一波，不要太深入
  55. // 在组件中使用
  56. mounted(){
  57.     this.$store.dispatch('home/getSwiperList')
  58. }
  59. computed: {
  60.     // 辅助函数一共有4个，为了方便操作Vuex中的数据而产生的
  61.     ...mapState('home', ['swiperList']) //借助附注函数
  63. }