Vuex 使用和说明

最新推荐文章于 2024-11-01 14:22:21 发布

雷达触控交互系统@让您感触未来

最新推荐文章于 2024-11-01 14:22:21 发布

阅读量255

点赞数

文章标签： vue.js

幻辰科技nbhctec

本文链接：https://blog.csdn.net/weixin_38826167/article/details/130019640

版权

本文介绍了Vuex中的关键概念，如state用于存储数据，mutations是同步修改state的唯一方法，actions处理异步操作，getters用于计算和筛选state。同时，展示了如何创建和调用Vuexstore，包括commit和dispatch函数的使用。在Vue3中，可以使用`useStore`和`computed`直接访问store的值。

摘要由CSDN通过智能技术生成

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