vue3 中vuex简单快速入门

import { createStore } from 'vuex'   //这里可以看到我们创建项目后的一个基本结构

export default createStore({
  state: {
    
  },
  getters: {

  },
  mutations: {

  },
  actions: {

  },
  modules: {

  }
})

这里我们在main.js中全局引入一下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import ElementPlus from 'element-plus'
//这里是可以直接链式调用的，也可以分开来写
createApp(App).use(store).use(Antd).use(Icons).use(router).use(ElementPlus).mount('#app')

    当我们想要存储数据时

 this.$store.commit("username",存放内容)
  

像这样

然后进入我们的vuex

import { createStore } from 'vuex'

export default createStore({
  state: {   //在state这里获取一下存入的值
    name:"",
  },
  getters: {
  },
  mutations: {
    username(state,value){ //我们把定义好的username放在mutations中
      state.name=value
    },
  },
  actions: {
  },
  modules: {
  }
})

 最后我们在其他页面获取如下

this.$store.state.存入内容

这里我们log一下