Vue3中vuex的基本使用

郑建零零发

已于 2022-12-12 10:24:01 修改

阅读量506

点赞数

分类专栏： Vuex 文章标签：前端

于 2022-12-12 10:15:59 首次发布

本文链接：https://blog.csdn.net/qq_52421092/article/details/128282917

版权

一、基本结构

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