Vue usa Vuex para empaquetar y usar la tienda paso a paso

Uno, instale las dependencias de Vuex

cnpm install vuex --save

2. Almacén de paquetes paso a paso

1. Importar almacén de la tienda a nivel mundial en main.js (crear el siguiente paso)

import store from './store' //引入store
 
new Vue({
    
    
  el: '#app',
  router,
  store, //挂载store，this将自动生成$store属性
  template: '<App/>',
  components: {
    
     App }
})

Monte la tienda, esto generará automáticamente el atributo $ store

2. esta. $ Tienda

Crear almacén de la tienda: es habitual crear una carpeta de la tienda en src y luego crear index.js, el contenido:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
 
export default store;

En este punto ya tiene un almacén global de tienda vacío, sin ninguna función, pero puedeBajo cualquier instancia vueutilizar esta. $ tienda Ve a visitarlo.

• El alcance de uso de la tienda se puede utilizar globalmente;
• let a=1; {a:a}.a 的缩写是 {a}.a,即当字典的键和值命名一样时，可以省略只写a
• El estado, los captadores, las mutaciones y las mutaciones son todas variables especiales encapsuladas por Vuex. Las variables de función declaradas a continuación son todos estos nombres. Una ventaja es que la tienda se puede abreviar al montar la función (como 3-1, en este ejemplo). Por supuesto, también puede escribir funciones directamente en la tienda (como 3-2).

3. this. $ Store.state

Leer la función de datos para el almacén de la tienda: estado

/*********  3-1 **********/
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={
    
     //要设置的全局访问的state对象,赋予初始属性值
     themeColor: {
    
    val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
 const store = new Vuex.Store({
    
    
       state
    });
 
export default store;

En este punto, su tienda tiene la función de acceder a los datos, puede usar this. $ store.state.themeColorEspere los datos.
La siguiente es la segunda forma de escribir.

/*********  3-2 **********/
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
    
    
      state:{
    
    
       	 //要设置的全局访问的state对象,赋予初始属性值
	     themeColor: {
    
    val:'blue',opacity:false},
	     changeThemeCount:0,
	     cache:''
       }
    });
 
export default store;

4. this. $ Store.getters (actualización de this. $ Store.state)

Actualice la función de estado para que tenga potencia de cálculo (similar al método calculado en vue): getters:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={
    
     //要设置的全局访问的state对象,赋予初始属性值
     themeColor: {
    
    val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
const getters = {
    
       //实时监听state值的变化(最新状态)
    getThemeColor(state) {
    
      //定义函数，返回处理过的val，命名最好有代表性
       let hour = new Date().getHours();
       // 如果白天则主题色不透明，反之
       state.themeColor.opacity = 8 <= hour && hour <= 20;
       return state.themeColor
    }
};
const store = new Vuex.Store({
    
    
       state, // 挂载存取数据功能
       getters //挂载数据计算功能
});
export default store;

Usar en este momento esto. $ store.getters.getThemeColor Obtenga el color, establecerá automáticamente si el tema tiene un efecto transparente de acuerdo con el tiempo

5. this. $ Store.commit ('mutaciones')

Usar función de función para almacén de tienda (solo para manipular datos de estado): mutaciones-sincronización

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={
    
     //要设置的全局访问的state对象,赋予初始属性值
     themeColor: {
    
    val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
const getters = {
    
       //实时监听state值的变化(最新状态)
    getThemeColor(state) {
    
      //定义函数，返回处理过的val，命名最好有代表性
       let hour = new Date().getHours();
       // 如果白天则主题色不透明，反之
       state.themeColor.opacity = 8 <= hour && hour <= 20;
       return state.themeColor
    }
};
const mutations = {
    
    
    //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
    clearCatch(state) {
    
     
        state.cache = "";
        state.changeThemeCount= 0;
    },
    setThemeColor(state,color,opacity){
    
     
       state.themeColor.val = color;
       state.themeColor.opacity = opacity;
       state.changeThemeCount++;
    }
};
const store = new Vuex.Store({
    
    
        state, // 挂载存取数据功能
       getters, //挂载数据计算功能
       mutations // 挂载函数功能
});
export default store;

Puedes usar this. $ store.commit ('setThemeColor', 'gray', '1')(Tenga en cuenta que el primer parámetro es el nombre de la función, no el parámetro pasado al estado, el estado mismo pasará y los dos últimos son los parámetros correspondientes). Puede establecer activamente el color y la transparencia del tema, y ​​la operación es sincrónica, es decir, si llama a la función setThemeColor varias veces en el mismo componente, el valor de state.changeThemeCount en el almacén es el mismo. La función asincrónica se presenta a continuación.

6. this. $ Store.dispatch ('actions') (actualización de this. $ Store.commit ('mutations'))

Actualizar la función de confirmación de la función del almacén de la tienda (solo para funciones en mutaciones de operación asíncrona): acciones-asíncronas

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={
    
     //要设置的全局访问的state对象,赋予初始属性值
     themeColor: {
    
    val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
const getters = {
    
       //实时监听state值的变化(最新状态)
    getThemeColor(state) {
    
      //定义函数，返回处理过的val，命名最好有代表性
       let hour = new Date().getHours();
       // 如果白天则主题色不透明，反之
       state.themeColor.opacity = 8 <= hour && hour <= 20;
       return state.themeColor
    }
};
const mutations = {
    
    
    //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
    clearCatch(state) {
    
     
        state.cache = "";
        state.changeThemeCount= 0;
    },
    setThemeColor(state,color,opacity){
    
     
       state.themeColor.val = color;
       state.themeColor.opacity = opacity;
       state.changeThemeCount++;
    }
};
const actions = {
    
    
    //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
    setThemeColorAction(context,color,opacity){
    
    
     	context.commit('setThemeColor',color,opacity);
    }
};
const store = new Vuex.Store({
    
    
       state, // 挂载存取数据功能
       getters, //挂载数据计算功能
       mutations, // 挂载函数功能
       actions， // 挂载异步函数
});
export default store;

Puedes usar this. $ store.dispatch ('setThemeColorAction', 'gray', '1')(Tenga en cuenta que el primer parámetro es el nombre de la función, no el parámetro pasado al contexto, el contexto mismo pasará y los dos últimos son los parámetros correspondientes). Puede establecer activamente el color y la transparencia del tema, y ​​la operación es asincrónica, es decir, si llama a la función setThemeColorAction varias veces en el mismo componente, el valor de state.changeThemeCount en el almacén no será el mismo.

Tres módulos modulares

El segundo módulo presenta las cuatro funciones del repositorio de la tienda: estado, captadores, mutaciones y acciones. La quinta función se presenta a continuación: módulos.

• Cuando el proyecto es relativamente grande, los datos en una tienda serán muy grandes y complejos, lo que no es fácil de administrar. En este momento, se pueden construir múltiples "sub-almacenes" para leer y manipular datos correspondientes a diferentes módulos.
• Tenga en cuenta que el almacén principal sigue siendo ese, simplemente coloque su "sub-repositorio" debajo de los módulos del almacén principal.
• El sub-repositorio se parece mucho a un almacén. De hecho, no es una instancia de una tienda, no es un almacén (el objeto después de que se instancia el nuevo Vuex.Store () es el almacén), sino un objeto js ordinario (diccionario).

1. Cree una nueva carpeta de módulos en la tienda y cree un nuevo "sub-repositorio" home.js en los módulos.

Es decir, home.js solo se preocupa por los datos debajo de la página de inicio (generalmente no divida demasiado, como máximo una página y un almacén son simples), el siguiente es el código home.js

//home.js

const state={
    
    
    users:[] //存访问该页面的所有用户
};
const getters={
    
    
  getUsers(state){
    
     //获取访问该页面的所有用户
    // 对数据清理-除去脏数据
  	if (state.users.includes('*')) delete state.users['*'] 
    	return state.users;
  }
};
const mutations={
    
    
     addUser(state,name){
    
     //增加访问用户
        state.collects.push(name)
     }
 };
const actions={
    
    
    invokeAddUser(context,name){
    
     //触发mutations里面的addUser,传入数据形参name对应到users
        context.commit('addUser',name);
    }
};
// 注意和仓库的区别
const store = {
    
    
     // namespaced用于在全局引用此文件里的方法时标识这一个的文件名，使得让人明白这些数据来自哪个仓库
     // 即当你需要在别的文件里面使用子仓库(mapStates、mapGetters、mapActions)时，里面的方法需要注明来自哪一个模块的方法
     namespaced:true,
     state,
     getters,
     mutations,
     actions
}
export default store;

2. Se ha creado el "subdepositorio" y el almacén principal debe hacer referencia a él:

import Vue from 'vue';
import Vuex from 'vuex';
import home from './modules/home.js'

Vue.use(Vuex);
 const state={
    
     //要设置的全局访问的state对象,赋予初始属性值
     themeColor: {
    
    val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
const getters = {
    
       //实时监听state值的变化(最新状态)
    getThemeColor(state) {
    
      //定义函数，返回处理过的val，命名最好有代表性
       let hour = new Date().getHours();
       // 如果白天则主题色不透明，反之
       state.themeColor.opacity = 8 <= hour && hour <= 20;
       return state.themeColor
    }
};
const mutations = {
    
    
    //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
    clearCatch(state) {
    
     
        state.cache = "";
        state.changeThemeCount= 0;
    },
    setThemeColor(state,color,opacity){
    
     
       state.themeColor.val = color;
       state.themeColor.opacity = opacity;
       state.changeThemeCount++;
    }
};
const actions = {
    
    
    //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
    setThemeColorAction(context,color,opacity){
    
    
     	context.commit('setThemeColor',color,opacity);
    }
};
const store = new Vuex.Store({
    
    
       state, // 挂载存取数据功能
       getters, //挂载数据计算功能
       mutations, // 挂载函数功能
       actions， // 挂载异步函数
       modules:{
    
     // 挂载子仓库
         home
    	}
});
export default store;

¡Ahora existe el primer "sub-almacén"!

Cuarto, usa el almacén

1. Sin serie de mapas

Adecuado para menos
casos de uso: cree un almacén y use directamente estados, captadores, mutaciones y acciones en componentes:

• this. $ store.state. *
• esto. $ store.getters. *
• esto. $ store.commit. *
• esto. $ store.dispatch. *

2. Serie de mapas cartográficos

Adecuado para escenarios de uso frecuente:
1. Se requiere la importación antes de usar mapGetters, mapActions y mapStates:

import {
    
    mapState,mapGetters,mapActions} from 'vuex';

2. Utilice la nueva sintaxis de ES6Hiper referencia, Mapee todos los datos o métodos bajo una determinada función para su uso. A continuación, se muestran ejemplos de mapState, mapGetters y mapActions:

	//这里的...是超引用，映射内容，可以写在computed下、methods下等（一般放在开头）
	// 直接从库中取值 - 将库里的users值返回给字典中的users并映射给this组件
 	...mapState({
    
      
         users:state=>state.home.users  
      }),
     // 使用计算属性 - 将库里的users计算后的值返回给字典中的users并映射给this组件
    ...mapGetters('home',{
    
     
         users:'getUsers' //获取清理后的数据
         //由于home仓库 namespaced:true,所以第一个参数作为标识
         // 不使用标识访问的是主仓库
      })
      // 使用异步函数 - 以数组中的函数名，从库中对应的函数映射给this组件以供使用
    ...mapActions('home',['invokeAddUser'])
    // 有某个组件 <span @click='invokeAddUser(name)'></span>
    // 或者直接使用 this.invokeAddUser(name)

3. Expansión

1、mapState映射的三种写法
  computed: mapState({
    
    
   // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
    
    
      return state.count + this.localCount
    }
  })
  
2、当映射的计算属性的名称与state的子节点名称相同时，
   我们也可以给 mapState传一个字符串数组。
  computed: mapState([ // 数组
   "count"
  ])
  
3、仓库中action的第二种接收参数
const actions = {
    
    
    //自定义触发mutations里函数的方法，{commit}与store 实例具有相同方法和属性
    setThemeColorAction({
    
    commit},color,opacity){
    
    
     	commit('setThemeColor',color,opacity);
    }
};

3. Resumen

1. Vuex es una arquitectura de administración de estado centralizada especialmente diseñada para aplicaciones Vue.js. Se basa en las ideas de diseño de Flux y Redux, pero simplifica el concepto y adopta una implementación especialmente diseñada para utilizar mejor el mecanismo de respuesta de datos de Vue.js.

2. Los cuatro conceptos centrales de Vuex son:
El árbol de estado: Vuex usa un único árbol de estado y un objeto contiene todos los estados a nivel de aplicación. Hasta ahora existe como una "fuente de datos única (SSOT)". Esto también significa que cada aplicación solo contendrá una instancia de tienda. El árbol de un solo estado nos permite ubicar directamente cualquier segmento de estado específico y obtener fácilmente una instantánea de todo el estado actual de la aplicación durante la depuración.
Getters: se utiliza para obtener datos de componentes de Vue de la tienda.
Mutadores: los controladores de eventos se utilizan para impulsar cambios de estado.
Acciones: funciones que los componentes pueden utilizar para impulsar mutaciones del controlador de eventos

3. El flujo de datos en la aplicación Vuex (mapa oficial de Vuex)

• El flujo de datos es unidireccional
• El componente puede llamar a la acción
• la acción se usa para enviar la mutación
• Solo la mutación puede cambiar de estado
• La tienda responde, no importa cuándo se actualice el estado, los componentes se actualizarán sincrónicamente

Referencias:
Pensando en si-Saltar y
pensar en si o no