Plan de transformación de Vuex en TSX: ¿Cómo lidiar con Vuex en el proyecto Vue2 de transformación de TS?

Los vuex más populares actualmente incluyen: vuex-aggregate, vuex-class, vuex-module-decorators

npm encontró los relevantes, mire el gráfico de tendencias: vuex-aggregate vs vuex-class vs vuex-class-component vs vuex-class-module vs vuex-class-modules vs vuex-module-decorators | tendencias npm

		Estrellas	Asuntos	Versión	Actualizado	Creado
agregado de vuex		14	19	4.1.3	Hace 4 años	Hace 4 años
clase vuex		1.670	18	0.3.2	hace 3 años	Hace 5 años
componente de clase vuex		213	40	2.3.6	Hace 2 meses	hace 3 años
módulo de clase vuex				0.0.16	hace 3 años	Hace 5 años
módulos de clase vuex		175	17	1.3.0	Hace un año	hace 3 años
decoradores-de-módulos-vuex		1.705	131	2.0.0	Hace 2 meses	Hace 4 años

De hecho, lo que se puede comparar es vuex-class y vuex-module-decorators, personalmente prefiero vuex-class, por supuesto, los dos se pueden combinar y usar juntos. Uno se define en la tienda y el otro se usa en el componente vue.

clase vuex

Dirección del proyecto: GitHub-ktsn/vuex-class: ayudantes de enlace para Vuex y vue-class-component Aunque esto no se ha actualizado en tres años, no tiene nada de malo.

Esto debe usarse junto con el componente de clase vue.

importar {Componente como tsc} desde 'vue-tsx-support'; 
importar {Componente, Prop} desde 'vue-property-decorator'; 
importar {Estado, Getter, Acción, Mutación, espacio de nombres} de 'vuex-class' 
const someModule = namespace('ruta/al/módulo') 
@Component 
exportar clase predeterminada Demo extiende tsc<Props> { 
    @State(estado => estado .bar) stateBar 
    @Getter('foo') getterFoo 
    @someModule.Getter('foo') moduleGetterFoo 
    render(){ 
        retrun ( 
            <div>demo</div> 
        ) 
    } 
}

Usar esto es conveniente para usar en componentes a través de decoradores y no es necesario cambiar la tienda vuex original en absoluto.

Pero si usa @vue/composition-api, no se puede usar vue-class. Se recomienda utilizar vuex-module-decorators aquí.

decoradores-de-módulos-vuex

Artículo anterior: GitHub - championswimmer/vuex-module-decorators: Decoradores TypeScript/ES7 para crear módulos Vuex de forma declarativa

Documentación oficial: Módulos con espacios de nombres | vuex-module-decorators

Esto es conveniente para definir módulos de tienda.

importar {Módulo, VuexModule, Mutación, Acción} desde 
la interfaz de exportación 'vuex-module-decorators' UserInfo { 
  nombre: cadena; 
  edad: número 
} 
@Module 
exporta la clase predeterminada UserInfo extiende VuexModule { 
  nombre = 'zhoulujun' 
  edad = 30 

  @Mutation 
  setUser(usuario: UserInfo) { 
    this.name = user.name 
  } 
  // la acción 'incr' confirma la mutación 'incremento' cuando hecho con el valor de retorno como carga útil 
  @Action({ commit: 'setUser' }) 
  getUser() { 
    // 不能直接调用 this.
    return http.getUser(id).then((user)=>{ 
        this.context.commit('setUser', usuario); 
    }) 
  } 
}

Crear tienda

importar Vue desde 'vue'; 
importar Vuex desde 'vuex'; 
importar {UserInfo} desde './modules/user'; 

Vue.use(Vuex); 

exportar interfaz IRootState { 
  usuario: UserInfo 
} 
exportar valor predeterminado nuevo Vuex.Store<IRootState>({ 
  // módulos: { 
  // usuario: Usuario, 
  // }, 

});

El punto del que hay que quejarse aquí es que la función en el decorador @Action llama directamente al método decorado @Mutation.

@AcciónMutación

En vuex, los datos en el estado deben cambiarse mediante confirmación. Hay un modificador MutationAction en vuex-module-decorators, que puede modificar directamente los datos de estado.

exportar la clase predeterminada PassengerStore extiende VuexModule { 
  nombre de usuario público = ''; 
  contraseña pública = ''; 
 
  //'nombre de usuario' y 'contraseña' se reemplazan por el objeto devuelto, 
  //El formato debe ser `{nombre de usuario:..., contraseña :. ..}`  
  @MutationAction({ mutate: ['nombre de usuario', 'contraseña'] }) 
  async setPassenger(nombre: cadena) { 
    respuesta constante: cualquiera = espera solicitud(nombre); // La interfaz devuelve [{nombre :'Zhang三',contraseña:'123456'}] 
    //El valor de retorno aquí debe ser consistente con el nombre después de mutar arriba; 
    return { 
      nombre de usuario: respuesta[0].nombre, 
      contraseña: respuesta[0].contraseña, 
    } ; 
  } 
}

Pero para este método es necesario haber determinado los datos estructurales. Todavía usamos esto relativamente raramente.

Generalmente, this.context.commit se usa directamente en acción.

módulos de clase vuex

vuex-module-decorators y son cosas similares. Para un uso detallado, consulte: Decoradores de clase mecanografiados para módulos vuex | BestofVue

nada mas que decir.

Decoradores vue-class y vuex-module-decorators combinados

Es decir, la parte de datos de la tienda usa vuex-module-decorators y, dentro del componente, se usa vue-class para llamar a la tienda.

Es la colección de los dos primeros fragmentos de código anteriores.

Aunque @vue/composition-api escribe componentes de vue2, se puede actualizar fácilmente a vue3 en el futuro. Pero vue-class-component también tendrá una versión vue3 en el futuro.

A nivel personal, me siento muy incómodo con el aspecto de herencia de clases @vue/composition-api.

Consulte el artículo:
El estado de Typed Vuex: el enfoque más limpio    https://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230

Primera experiencia con Vue y TypeScript: usando Vuex (vuex-module-decorators)  Primera experiencia con Vue y TypeScript: usando Vuex (vuex-module-decorators) - Nuggets

Reimpreso del artículo de este sitio " Plan de transformación de Vuex en TSX: ¿Cómo lidiar con Vuex en el proyecto Vue2 de transformación de TS?" 》,
indique la fuente: Plan de transformación de Vuex en TSX: ¿Cómo lidiar con Vuex en el proyecto Vue2 de transformación de TS? - Resumen de la entrada de vue - Sitio web personal de Zhou Junjun