¿Por qué el estado en Vuex se coloca en la propiedad calculada del componente en lugar de en los datos?

Cómo usar los datos en el estado en Vuex

Referencia: cuatro formas de usar los datos en el estado de vuex

1. Los datos almacenados en Vuex y los datos en la instancia de Vue siguen las mismas reglas. ¿Qué reglas siguen los datos?
   • Tipo: Objeto | Función, la definición del componente solo acepta función
   • Vue convertirá datala propiedad de forma recursiva getter/setter, de modo que datala propiedad pueda responder a los cambios de datos
   • var vm = new Vue({ data: {a : 1}), Puede vm.$dataacceder al objeto de datos original. Los ejemplos de Vue también representan todos los datos de la propiedad del objeto y, por lo tanto, el acceso es vm.aequivalente al acceso vm.$data.a.

Referencia: ¿Por qué los datos de un
componente en Vue son una función? Los componentes de Vue son vueinstancias que se pueden reutilizar . Es necesario asegurarse de que no importa cuántas veces se reutilice el componente, los datadatos de los componentes deben aislarse entre sí y no afectarse entre sí, por lo que debemos asegurarnos de que, Cada vez que se reutiliza un componente, datalos datos que contiene deben copiarse una vez. Se dataescribirá como una función, los datos se devolverán en forma de función, de modo que cada vez que se reutilice el componente se devolverá uno nuevo data.

2. Dado que el almacenamiento de estado de Vuex responde, la forma más fácil de leer el estado de la instancia de la tienda esAtributos calculadosRegresar a un estado

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{
   
   { count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

Siempre que haya un store.state.countcambio, el atributo calculado se volverá a calcular y el DOM asociado se actualizará.
** Defecto: ** En un sistema de construcción modular, cada componente que necesita usar el estado debe importarse con frecuencia, y el estado debe simularse cuando se prueban componentes

3. A través de las storeopciones, Vuex proporciona un mecanismo para "inyectar" el estado desde el componente raíz en cada subcomponente (es necesario llamarlo Vue.use(Vuex)). Al registrar las storeopciones en la instancia raíz , la instancia de la tienda se inyectará en todos los subcomponentes del componente raíz y se podrá this.$storeacceder a los subcomponentes a través de,

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

const Counter = {
  template: `<div>{
   
   { count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

Uno mismo en el proyecto:
en main.js, primero import store from './store', luego

new Vue({
  router,
  store,   
  render: h => h(App),
}).$mount('#app')

En la tienda index.js:

agregue: la diferencia entre vue $ mount y el

** No hay diferencia en el efecto de los dos, ambos deben montar el vue instanciado en el elemento dom especificado. ** Si se especifica el cuando se crea una instancia de vue, el vue se renderizará en el dom correspondiente a este el. Por el contrario, si no se especifica el, la instancia de vue estará en un estado "sin montar". Puede ejecutar manualmente el montaje a través de $ mount.

¿Por qué los datos en el estado se colocan en el componente calculado en lugar de los datos

Referencia: ¿Por qué usar calculado en lugar de datos para obtener el estado en vuex?
Esto se debe a que el contenido de los datos solo se inicializará una vez antes count: this.$store.state.countde que se active this.$store.state.countel gancho creado . Específicamente, el valor de recuento se establece en los datos antes de que se ejecute el gancho creado . Después de la asignación, el valor del atributo es puramente literal y cualquier this.$store.state.countcambio posterior no afectará el valor de la cuenta. El cálculo se logra a través de == seguimiento de dependencias ==, y el atributo calculado se volverá a evaluar cuando cambien sus dependencias relacionadas.

Combine el principio de respuesta en profundidad para comprender los datos y el gancho de vida calculado

Con respecto a *** datos ***,
Vue no puede detectar cambios en matrices y objetos

1. En cuanto a los objetos , Vue no puede detectar la adición o eliminación de propiedades. Dado que Vue realizará la conversión de getter / setter en la propiedad al inicializar la instancia, la propiedad debe existir en el objeto de datos para que Vue la convierta en un reactivo

• Para instancias ya creadas, ** Vue no permite la adición dinámica de propiedades sensibles a nivel de raíz. ** Se puede utilizar Vue.set(object, propertyName, value), por ejemplo Vue.set(vm.someObject, 'b', 2); también se puede utilizar vm.$set, por ejemplothis.$set(this.someObject,'b',2)

2. Con respecto a las matrices , Vue no puede detectar cambios en las siguientes matrices:
   • Cuando usa el índice para establecer directamente un elemento de matriz,vm.items[indexOfItem] = newValue
   • Cuando modifica la longitud de la matriz,vm.items.length = newLength
   • Para la pregunta uno, puede usar: Vue.set(vm.items, indexOfItem, newValue)(es decir, Vue.set) o vm.items.splice(indexOfItem, 1, newValue)(es decir, Array.prototype.splice) o vm.$set(vm.items, indexOfItem, newValue)(es decir, vm. $ Set)
   • Para la pregunta dos, puede usar splice,vm.items.splice(newLength)
3. Actualice la cola de forma asincrónica ,
   • Vue actualiza el DOM de forma asincrónica. Siempre que escuche los cambios de datos, Vue abrirá una cola y almacenará en búfer todos los cambios de datos que ocurran en el mismo ciclo de eventos. Si el mismo observador se activa varias veces, solo se insertará en la cola una vez.
   • En el siguiente ciclo de eventos "tick", Vue actualiza la cola y ejecuta el trabajo real (deduplicado). Vue internamente intenta usar Promise.then nativo, MutationObserver y setImmediate para colas asincrónicas
   • Para esperar a que Vue termine de actualizar el DOM después de que los datos cambien, puede usar Vue.nextTick (devolución de llamada) inmediatamente después de que los datos cambien. De esta manera, la función de devolución de llamada se llamará después de que se complete la actualización del DOM, y $ nextTick () devuelve un objeto Promise

Acerca de *** calculado ***,

• Las propiedades calculadas solo tienen captadores de forma predeterminada y no hay efectos secundarios
• Defina la misma función como método y como atributo calculado: siempre que se activa una nueva representación, el método de llamada siempre ejecutará la función nuevamente; ** los atributos calculados se almacenan en caché en función de sus dependencias de respuesta. ** Se volverán a evaluar solo cuando cambien las dependencias reactivas relevantes. En Vuex, el valor de retorno del getter se almacenará en caché de acuerdo con sus dependencias y se volverá a calcular solo cuando cambie su valor de dependencia.
• ¿Por qué se necesita el almacenamiento en caché? Supongamos que tenemos un atributo computacional A con una sobrecarga de rendimiento relativamente grande, que necesita atravesar una matriz enorme y hacer muchos cálculos. Entonces podemos tener otras propiedades calculadas que dependen de A. Si no hay caché, ¡inevitablemente ejecutaremos el getter de A varias veces!
• Con el atributo de escucha watch, watch es más útil cuando es necesario realizar operaciones asincrónicas o costosas cuando cambian los datos.