vue存储库-----pinia

vue存储库-----pinia和vuex

pinia与vuex的区别

（1）pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数

（2）pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点

（3）pinia语法上比vuex更容易理解和使用，灵活。

（4）pinia没有modules配置，没一个独立的仓库都是definStore生成出来的

（5）pinia state是一个对象返回一个对象和组件的data是一样的语法

pinia与vuex的优缺点

Pinia的优点:

1. 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
2. 极其轻巧(体积约 1KB)
3. store 的 action 被调度为常规的函数调用，而不是使用dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
4. 支持多个Store
5. 支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia的缺点:

1. 不支持时间旅行和编辑等调试功能

Vuex的优点:

1. 支持调试功能，如时间旅行和编辑
2. 适用于大型、高复杂度的Vue.js项目

Vuex的缺点:

1. 从 Vue 3 开始，getter 的结果不会像计算属性那样缓存
2. Vuex 4有一些与类型安全相关的问题

pinia与vuex的使用选择

• 由于Pinea是__轻量级的，体积很小__，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。
• 将Vuex 用于中小型 Vue.js 项目是过度的，因为它__重量级的，对性能降低有很大影响__。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。
• pinia和vuex在vue2和vue3都可以使用，一般来说vue2使用vuex,vue3使用pinia。

pinia的使用

1. 安装pinia：

   // npm 安装
   npm install pinia
   
   // yarn 安装
   yarn add pinia
   

2. 创建一个store

   src/stores/index.ts

   import { createPinia } from 'pinia';
   
   const pinia = createPinia();
   
   export default pinia;
   

3. 挂载到vue实例上

   src/main.ts

   import { createApp } from 'vue'
   import App from './App.vue'
   
   import pinia from './stores'
   import router from './router'
   
   const app = createApp(App)
   
   app.use(pinia)
     .use(router)
     .mount('#app')
   
   

4. 创建store状态管理库

   • defineStore()：第一个参数，为容器的一个别名且此名字必须唯一，不能重复，第二个参数理解为配置对象
   • state：用来存储全局状态
   • getters：用来监听或者计算状态变化的，有缓存功能
   • actions：用来对 state 里数据变化的业务逻辑，个人理解为，修改 state 全局状态数据的

   import { defineStore } from 'pinia'
   export const mainStore = defineStore('main', {
       state: ()=>{
           return {}
       },
       getters: {},
       actions: {}
   })
   

   src/store/app.ts

   import Cookies from 'js-cookie'
   import { defineStore } from 'pinia'
   
   export const useAppStore = defineStore({
     id: 'app', // 容器名字
     state: () => ({
       sidebar: {
         opened: Cookies.get('sidebarStatus') ? !!+(Cookies.get('sidebarStatus') as string) : true,
         withoutAnimation: false
       },
       device: 'desktop'
     }),
     
     actions: {
   
       toggleSidebar () {
         this.sidebar.opened = !this.sidebar.opened
         this.sidebar.withoutAnimation = false
         if (this.sidebar.opened) {
           Cookies.set('sidebarStatus', '1')
         } else {
           Cookies.set('sidebarStatus', '0')
         }
       },
   
       closeSidebar(withoutAnimation: boolean) {
         Cookies.set('sidebarStatus', '0')
         this.sidebar.opened = false
         this.sidebar.withoutAnimation = withoutAnimation
       },
   
       toggleDevice(device: string) {
         this.device = device
       }
     }
   })
   

5. 组件中使用

   import { defineStore } from 'pinia';
   // 获取store实例
   import type { UserInfoState } from './interface';
   
   export const useUserInfoStore = defineStore('userInfo', {
   
   	state: (): UserInfoState => ({
   			...
     }),
   	actions: {
           // 关于登录的方法
           async login ( username: string, password: string ) {
             const {token} = await loginApi(username,password)
             this.token = token
             setToken(token)
           },
   	  },
   });
   
   

   
   <script lang="ts" setup>
   import { useUserInfoStore } from '@/stores/userInfo';
   .....
   /* 
   点击登陆的回调
   */
   const handleLogin = async () => {
     await formRef.value?.validate()
     loading.value = true
     const {username, password} = loginForm.value
     
     try {
         // 使用pinia仓库中actions的login方
       await userInfoStore.login(username, password)
         
       router.push({ path: redirect.value || '/' })
     } finally {
       loading.value = false
     }
       
   }
   </script>
   
   

vuex的使用

1. 安装

   npm install vuex --save
   
   yarn add vuex
   

2. 在项目中，安装

   src/store/index.ts

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   
   
   export default new Vuex.Store({
       state:{
           pathName: "",
           currDbSource: {},
           currJobData: {},
           DbSource: []
       },
       // 注意：
       //actions.js ：暴露给用户使用，借此触发mutations中的方法，保存数据（可执行异步操作）
       //mutation中不能解决异步问题，用来修改state数据
       mutations:{
           // 保存当前菜单栏的路径
           savePath(state,pathName){
               state.pathName = pathName;
           },
           // 保存当前点击的数据源
           saveCurrDbSource(state,currDbSource){
               state.currDbSource = currDbSource;
           }
           }
       }
   })
   

3. 引入创建的vuex的store,vue注册后全局使用

   src/main.ts

   // 引入vuex-store
   import store from './store/index';
    
   new Vue({
     el: '#app',
     router,
     store,
     render: h => h(App)
   });
   

4. 组件中使用

   使用vuex中的方法： this.$store.commit('事件名',传递的数据)

   
   methods:{
    click(){
       // 点击按钮进行一些操作，然后保存数据
       this.$store.commit('saveCurrDbSource',this.db)
     }
   
   

   获取变量：

   this.$store.state.变量名
    
   // 例如
   this.$store.state.currDbSource