Vuex 使用和说明

1、state：存储数据状态；

2、mutations：修改状态的方法，必须是同步方法；

3、actions：用来触发异步操作的方法；

4、getters：对数据状态进行计算和筛选的方法；

5、modules：将 store 分割成多个模块。

2. store.commit(mutationName, payload)：用于调用 mutation，第一个参数是 mutation 的名称，第二个参数是 payload，它可以是一个参数，也可以是一个对象，命名为 payload。payload 可以帮助我们传递更多的参数信息。

3. store.dispatch(actionName, payload)：用于调用 action，第一个参数是 action 的名称，第二个参数与 commit 相同，也可以是一个参数或命名对象 payload。

4. store.getters.getterName：用于获取 getters 中定义的计算属性，getterName 即为计算属性的名称。

一、创建Vuex

// 引入 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
    }
  }
})

二、调用vuex里面的参数

1、获取 state里面的两个参数案例

let count = this.$store.state.count

let message =  this.$store.state.message

2、设置 state里面两个参数的数据，需要通过vuex 里面的动态函数设置参数： mutations 里面定义的方法

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')

三、如果在VUE3中可以直接通过Vuex的computed来获取参数值

// 先导入vuex

import { useStore } from 'vuex'

//在setUp中创建vuex的应用

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

猜你喜欢