Vue3中vuex的基本使用

最新推荐文章于 2024-10-09 17:17:01 发布

免费的东西

最新推荐文章于 2024-10-09 17:17:01 发布

阅读量1.2k

点赞数 3

分类专栏：前端 html 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_67394360/article/details/123370486

版权

本文介绍了Vue3中vuex的基本结构和使用，包括如何操作与使用store中的数据。此外，详细讲解了如何将store数据进行模块化，分为global和user两个模块，并展示了模块化后的代码结构以及在组件中如何操作模块化后的store数据。

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

一、基本结构

src/store/index.js中，代码如下

// vue3中创建store实例对象的方法createStore()按需引入
import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  },
  modules: {
  }
})

二、基本使用

src/store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    info: 'hello'
  },
  mutations: {
    // 定义mutations，用于修改状态(同步)
    updateInfo (state, payload) {
      state.info = payload
    }
  },
  actions: {
    // 定义actions，用于修改状态(异步)
    // 2秒后更新状态
    updateInfo (context, payload) {
      setTimeout(() => {
        context.commit('updateInfo', payload)
      }, 2000)
    }
  },
  getters: {
    // 定义一个getters
    formatInfo (state) {
      return state.info + ' Tom'
    }
  },
  modules: {
  }
})

最低0.47元/天解锁文章