Использование Vuex и инструкции

1. состояние: состояние данных хранилища;

2. Мутации. Метод изменения состояния должен быть синхронным;

3. Действия: методы, используемые для запуска асинхронных операций;

4. Геттеры: методы расчета и фильтрации состояния данных;

5. Модули: разделите магазин на несколько модулей.

2. store.commit(mutationName, payload): используется для вызова мутации. Первый параметр — это имя мутации, а второй параметр — полезная нагрузка. Это может быть параметр или объект с именем payload. полезная нагрузка может помочь нам передать больше информации о параметрах.

3. store.dispatch(actionName, payload): используется для вызова действия. Первый параметр — это имя действия. Второй параметр аналогичен фиксации. Он также может быть параметром или полезной нагрузкой именованного объекта.

4. store.getters.getterName: используется для получения вычисляемых свойств, определенных в геттерах, где getterName — это имя вычисляемого свойства.

1. Создайте Вуэкс

// 引入 Vue 和 Vuex
import { createApp } from 'vue'
import { createStore } from 'vuex'

// 创建一个 Vuex 的 store
const store = createStore({
  state: {
    count: 0,
    message: []
  },
  mutations: {
    increment(value) {
      state.count = value
    },
    decrement(message) {
      state.message = message
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    messageLength(state) {
      return state.message.length
    }
  }
})

2. Вызовите параметры в vuex

 1. Получите два варианта параметров в состоянии

let count = this.$store.state.count

let message =  this.$store.state.message

2. Чтобы установить данные двух параметров в состояние, вам необходимо установить параметры через динамическую функцию в vuex: метод, определенный в мутациях.

let value = 202
this.$store.commit('increment' ,value)


let message= [{name:'张三' ,age :23 } ,{ name:'李四' , age:24}]
this.$store.commit('decrement' ,message)

3. Получите значение вычисляемого атрибута.

let count = this.$store.getters.messageLength

4. Запустите асинхронный метод, и вы также можете передать параметры

this.$store.dispatch('incrementAsync')

3. Если в VUE3 можно получить значения параметров напрямую через вычисляемый Vuex

// 先导入vuex

import { useStore } from 'vuex'

//在setUp中创建vuex的应用

 setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    
     console.log(count)
   
  }