¿Puede Pinia reemplazar a Vuex?

1. Introducción

Antes de Vue 3.0salir, la corriente principal del almacenamiento de datos todavía era Vuex. Sin embargo, cuando Vue 3.0salió a la luz, el funcionario Componsition APIdiseñó una nueva gestión estatal para atenderlo, y los puntos de función mencionados en Piniael futuro son exactamente los que se han implementado hasta ahora.Vuex 5Pinia

! Vuex 5Puntos característicos mencionados:

• Mejor compatibilidadComponsition AP
• mejor soporteTypeScript
• modulesEstructura anidada optimizada
• Admite carga en caliente, no es necesario actualizar la página

2. Comparación

PiniaComparar con Vuex:

• PiniaNo mutationsy actionsadmite sincrónico/asincrónico, Vuexsincrónico mutationsy asíncronoactions
• PiniaVuextiene mejor TypeScriptapoyo que
• PiniaNo más modulesestructuras anidadas, independientes storey aplanadas para una mejor división del código
• PiniaAdmite carga en caliente, no es necesario recargar la página, mantiene el estado existente
• PiniaVue 3El almacenamiento en caché se admite y ya no Vuexse admite en
• PiniaEn comparación con Vuexotros más livianos (el volumen es de aproximadamente 1K)
• PiniaMétodo de soporte $reset, se puede inicializar.state
• PiniaLa función no es compatible y aún no está madura time-travelen comparación con la función de depuración.Vuex
• PiniaTambién apoyadoVue 2.0

3. uso

• 1. Instalación

  npm i pinia@next -S

• 2. Regístrate

  index.js:

  import {
        
         createApp } from 'vue'
  import element from 'element-plus'
  import '@/assets/css/index.css'
  import router from '@/router/index'
  import App from './App'
  import {
        
         createPinia } from 'pinia'
  
  const app = createApp(App)
  
  app.use(element).use(router).use(createPinia()).mount('#root')
  

• 3. Crea un únicostore

  store/user.js:

  import {
        
         defineStore } from 'pinia'
  
  export const userStore = defineStore('user', {
        
        
    state: _ => {
        
        
      return {
        
        
        username: '张同学'
      }
    },
    getters: {
        
        
  
    },
    actions: {
        
        
      // 重置数据
      _reset() {
        
        
        this.$reset()
      }
    }
  })
  

• 4. Referencia dentro de los componentes

  Home.vue:

  <template>
    <div>
      姓名：{
        
        {
        
         user_store.username }}
      <br />
      <el-button @click="change_username">修改名称</el-button>
      <el-button @click="user_store._reset()">重置</el-button>
    </div>
  </template>
  
  <script>
  import {
        
         userStore } from '../store/user'
  
  export default {
        
        
    setup() {
        
        
      let user_store = userStore() // 初始化 user_store
      
      return {
        
         user_store }
    }
  }
  </script>
  

• 5. store 4 formas de actualizar datos

  • (1): modificar directamente un valor específico

    let user_store = userStore()
    
    /**
     * @description 修改用户名称
     */
    let update = _ => {
            
            
      user_store.username = '张三'
    }
    

  • (2): utilizar $patchmodificación por lotes

    let user_store = userStore()
    
    /**
     * @description 修改用户名称
     */
    let update = _ => {
            
            
      user_store.$patch({
            
            
      	username: '张三' 
      })
    }
    

  • (3): utilice $patchuna única modificación para un valor específico

    let user_store = userStore()
    
    /**
     * @description 修改用户名称
     */
    let update = _ => {
            
            
      user_store.$patch(state => {
            
            
        state.username = '张三'
      })
    }
    

  • (4): Actionsmodificación de uso

    let user_store = userStore()
    
    /**
     * @description 修改用户名称
     */
    let update = _ => {
            
            
      user_store.update_username('张三')
    }
    
    // 修改用户名称
    update_username(value) {
            
            
      this.username = value
    }
    

• 6. Otros

  En la captura de pantalla a continuación, puedo ver algunos de sus propios atributos, métodos, etc., como: $resety $patchmétodos relacionados con la actualización en caliente.
  
  Con respecto Piniaal problema de la persistencia de datos, por el momento no existe una solución perfecta y necesita para ser estudiado.

4. Resumen

Dado que Pineaes liviano y pequeño, es adecuado para aplicaciones pequeñas y medianas. También es adecuado para Vue.jsproyectos de baja complejidad, ya que algunas funciones de depuración, como el viaje en el tiempo y la edición, aún no son compatibles. Es excesivo para Vuex uso futuro en proyectos pequeños y medianos, ya que es pesado y tiene un gran impacto en el rendimiento. Vue.jsPor tanto, Vuexes adecuado para Vue.jsproyectos pesados ​​y de alta complejidad.