Introducción básica a Vuex, gestión de estado, gestión de estado de interfaz única, gestión de varios estados y casos de uso

1. ¿Qué hace VueX?

Administrar el estado de todos los componentes

2. ¿Qué estado se gestiona con VueX?

Estado de inicio de sesión del usuario

3. Gestión de estado de interfaz única

<template>
  <div id="app">
  <h2>{
    
    {
    
    message}}</h2>
  <h2>{
    
    {
    
    counter}}</h2>
  <button @click="counter--">-</button>
  <button @click="counter++">+</button>
  </div>
</template>

<script>
export default {
    
    
  name: 'App',
  data(){
    
    
    return{
    
    
      message: '我是APP页面的组件',
      counter:0
    }
  }
}
</script>

<style>

</style>

Como se muestra en la figura a continuación, haga clic en el botón -> estado de activación -> cambio de página

4. Gestión de estado de varias páginas

Leyenda oficial de la gestión de estado de varias páginas:

5. Caso de gestión de estado de varias páginas

1. Crear un objeto de tienda

src/tienda/index.js

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

//1、安装插件
Vue.use(Vuex)

// 2、创建对象
const store = new Vuex.Store({
    
    
  state:{
    
    
    counter:0
  },
  mutations: {
    
    
    increment(state){
    
    
      this.state.counter++
    },
    decrement(state){
    
    
      this.state.counter--
    }
  }
})

// 3、导出store对象
export default store

2. Móntelo en la instancia de Vue:

src/main.js

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  store,
  render: h => h(App)
})

3. Usa el contador de Vuex

src/APP.vue

<template>
  <div id="app">
  <h2>{
    
    {
    
    message}}</h2>
  <h2>{
    
    {
    
    $store.state.counter}}</h2>
  <button @click="subtraction">-</button>
  <button @click="addition">+</button>
  <hello-vuex></hello-vuex>
  </div>
</template>

<script>

import HelloVuex from './components/HelloVuex'

export default {
    
    
  name: 'App',
  components:{
    
    
    HelloVuex
  },
  data(){
    
    
    return{
    
    
      message: '我是APP页面的组件'
    }
  },
  methods:{
    
    
    addition:function(){
    
    
      this.$store.commit('increment')
    },
    subtraction:function(){
    
    
      this.$store.commit('decrement')
    }
  }
}
</script>

<style>

</style>