1. Introducción a vuex

1. Descripción general
Vuex utiliza una herramienta para administrar de forma centralizada los datos compartidos de los que dependen los componentes, lo que puede resolver el problema del intercambio de datos entre diferentes componentes
Sitio web oficial de vuex: Inicio | Vuex

2. Cinco atributos principales:
estado (almacenamiento de datos de estado compartidos)
mutaciones (modificar datos; solo se puede ejecutar código sincrónico
) acciones (realizar operaciones asincrónicas , los datos se envían a mutaciones para su modificación)
captadores (atributos de estado calculados)
modelo (modularización)

2. Instale y configure vuex en el proyecto.

1. Cree un nuevo proyecto de andamio y aplique vuex en el proyecto.

vue create demo

2. Instalar vuex

npm i vuex --save

Si ocurre el siguiente error, significa que hay un problema con la versión

Puede ingresar el siguiente comando en la terminal y presionar Enter: npm install --save [email protected]

3. Establecer de la siguiente manera en main.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex)
const store = new Vuex.Store({})
new Vue({
  el: '#app',
  store
})

3. Definición y uso de los cinco atributos

① Definición y uso de estado

1. Definir datos de estado

const store = new Vuex.Store({
  state: {
    count: 1,//定义state数据
  },
})

2. Utilice datos estatales

Método 1: forma sin procesar: expresión de interpolación $store.state.xx

<div>原始形式获取state:{
   
   { $store.state.count }}</div>

Método 2: propiedad calculada: defina la propiedad de estado en la propiedad calculada

<div>计算属性获取state:{
   
   { count }}</div>

 computed: {
    count () {
      return this.$store.state.count
    }
  }

Método 3: función auxiliar: mapState

<div>辅助函数获取state:{
   
   { count }}</div>

//第一步：导入mapState
import { mapState } from 'vuex'
//第二步：利用延展运算符将导出的状态映射给计算属性
 computed: {
    ...mapState(['count'])
  }

②La definición y uso de mutaciones.

1. Definir mutaciones

const store = new Vuex.Store({
  mutations: {
    //不带参
    addCount1 (state) {
      state.count += 1
    },
    //带参数
    addCount2 (state, payload) {
      state.count += payload //payload为调用方法传过来的参数
    }
  }
})

2. Utilice el método de mutaciones.

Método 1: formulario original: $store
this.$store.commit('nombre del método definido en mutaciones'),
this.$store.commit('nombre del método definido en mutaciones', parámetros)

<button @click="addFn1">原始方式调用mutations方法-不带参</button>
<button @click="addFn2">原始方式调用mutations方法-带参数</button>

  methods: {
    addFn1() {
      this.$store.commit("addCount1");//不带参数
    },
    addFn2() {
      this.$store.commit("addCount2", 2);//带参数
    },
  },

Método 2: función auxiliar: mapMutations

<button @click="addCount1">+1</button>

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount1'])
}

③Definición y uso de acciones.

1. Definir acciones

const store = new Vuex.Store({
  actions: {
    // 不带参数,context等同于this.$store
    getAsyncCount1 (context) {
      setTimeout(function () {
        context.commit('addCount1')
      }, 1000)
    },
    // 带参数,context等同于this.$store,params代表调用方法传过来的参数
    getAsyncCount2 (context, params) {
      setTimeout(function () {
        context.commit('addCount2', params)
      }, 1000)
    }
  }
})

2. Utiliza el método de las acciones.

Método 1: llamada original - $store

 <button @click="addAsyncFn1">原始方式调用actions方法-不带参</button>
 <button @click="addAsyncFn2">原始方式调用actions方法-带参数</button>

methods: {
    addAsyncFn1(){
      this.$store.dispatch("getAsyncCount1")//不带参数
    },
    addAsyncFn2(){
      this.$store.dispatch("getAsyncCount2",2)//带参数
    }
  },

Método 2: función auxiliar-mapActions

 <button @click="getAsyncCount2(2)">辅助函数调用actions方法</button>

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['getAsyncCount2'])
}

Nota: Estos son los métodos que requieren parámetros en las mutaciones llamadas.

④ Definición y uso de captadores

1. Definir captadores

const store = new Vuex.Store({
  state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
   getters: {
    // filterList: function (state) {
    //   return state.list.filter(item => item > 2)
    // }
    filterList:  state =>  state.list.filter(item => item > 2)//简写
  }
})

2. Utilice datos de captadores

Método 1: método original-$store

 <div>原始形式获取getters:{
   
   { $store.getters.filterList }}</div>

Método 2: función auxiliar: mapGetters

<div>辅助函数获取getters:{
   
   { filterList }}</div>

import { mapGetters } from "vuex";
computed: {
    ...mapGetters(['filterList'])
}

⑤ Definición y uso del módulo

1. Definir módulo Módulo

const store  = new Vuex.Store({
   modules:{
    user:{
      state:{
        token:"12345"
      }
    },
    setting:{
      state:{
        website:"https://www.baidu.com/"
      }
    }
  }
  })

2. Utilice datos en el módulo Módulo

<div>用户token: {
   
   { $store.state.user.token }}</div>
<div>网站地址: {
   
   { $store.state.setting.website }}</div>

En este momento, para obtener el estado del submódulo, debe obtenerlo a través de $store ... state模块名称属性名

3. Optimice el método de escritura anterior.

Paso 1: escriba lo siguiente en los captadores más externos

  getters: {
    token: state => state.user.token,
    website: state => state.setting.website
  },

Paso 2:

<div>token:{
   
   {token}}</div>
<div>website:{
   
   {website}}</div>

import { mapGetters } from "vuex";
  computed: {
     ...mapGetters(["token","website"])
  },

Enseñarte paso a paso cómo usar vuex y solucionar errores durante el uso e instalación.