Introducción y uso de Vuex

Vuex es un modo de gestión de estado desarrollado específicamente para aplicaciones Vue.js.

1. Vuex resuelve el problema de compartir el estado unificado entre componentes (resuelve el intercambio de datos entre componentes no padre-hijo y hermanos)
2. Persistencia de datos en componentes

Utiliza almacenamiento centralizado para gestionar el estado de todos los componentes de la aplicación y utiliza las reglas correspondientes para garantizar que el estado cambie de forma predecible. Vuex también está integrado en la herramienta de depuración oficial de Vue,
devtools, extensión y proporciona muchas funciones de depuración avanzadas, como depuración de viaje en el tiempo de configuración cero, importación y exportación de instantáneas de estado, etc.

Vuex no se recomienda para proyectos pequeños

Conceptos básicos de Vuex

1 、 Estado
2 、 Getter
3 、 Mutación
4 、 Acción
5 、 Módulo

Uso de Vuex

1. Instale vuex
npm install vuex --save
2. Cree una nueva carpeta vuex en src 3. Cree un nuevo store.js en la
carpeta vuex Importar y usar vuex

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = new Vuex.Store({
    
    
    /** 1、state 在 vuex 中用于存储数据 */
    state: {
    
    
        count: 1
    },
    /** 2、mutations 里面放的是方法，主要用于改变 state 里面的数据 */
    mutations: {
    
    
        incCount(state, data){
    
    
            // state 是上面的数据，data是传过来的值
            ++state.count;
        }
    },
    /** 3、类似计算属性，改变 state 里面的 count 数据的时候会触发
        getters里面的方法 获取新的值 */
    getters: {
    
    
        computed: (state) =>{
    
    
            console.log(state.count);
        }
    },
    /** 4、Action 类似于 mutations，不同在于：
            Action 提交的是 mutation，而不是直接变更状态。
            Action 可以包含任意异步操作。 */
    action: {
    
    
        ioncMutationsCount(context){
    
    
            ... /* 异步操作 */
            
            /** 执行 mutations 里面的 incCount 方法 */
            context.commit('incCount');
            
            ... /* 异步操作 */
        }
    },
})

export default store;

4. Introduzca stroe.js en la página que necesita compartir datos.

<template>
    <div>
        {
    
    {
    
    this.$store.state.count}}
        <br>
        <button @click="incCount()">增加数量+</button>
    </div>
</template>
<script>
import store from '../vuex/store.js';

exprot default{
    
    
    data(){
    
    
        return{
    
    
            msg: '我是一个home组件'
        }
    },
    store,
    methods:{
    
    
        incCount(){
    
    
            // 改变 vuex store 里面的数据, 触发 state 里面的数据
            this.$store.commit('incCount', 123456);
            // 123456 是传递过去的数值，在方法中定义了 data 来接收
            // 触发 actions 里面的方法
            this.$store.dispath('incMutationsCount');
        }
    }
}
</script>