vue3下使用Vuex，vuex入门

一，在nodejs项目中安装vuex模块，这里再vue-cli创建的项目下安装模块

npm install vuex

二，创建文件夹store和index.js文件

src/store/index.js代码如下（以下是vue2的写法）：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//公共state对象，存储所有组件的状态
const state={
  user:{
    name:''
  }
}


//唯一取值的方法，计算属性
const getters={
  getUser(state){
    return state.user;
  }
}

//唯一可以修改state值的方法，同步阻塞
const mutations={
  updateUser(state,user){
    state.user = user;
  }
}

//异步调用mutations方法
const actions = {
  asyncUpdateUser(context,user){
    context.commit('updateUser',user)
  }
}

//暴露出去
export default new Vuex.store({
  state,
  getters,
  mutations,
  actions
})

以下是vue3的写法如下

import { createStore } from 'vuex'

//公共state对象，存储所有组件的状态
const state={
  user:{
    name:''
  }
}

//唯一取值的方法，计算属性
const getters={
  getUser(state){
    return state.user;
  }
}

//唯一可以修改state值的方法，同步阻塞
const mutations={
  updateUser(state,user){
    state.user = user;
  }
}

//异步调用mutations方法
const actions = {
  asyncUpdateUser(context,user){
    context.commit('updateUser',user)
  }
}

//暴露出去
export default createStore({
  state,
  getters,
  mutations,
  actions
})

vue3也可以如下写法，只是把方法直接放进去

import { createStore } from 'vuex'

export default createStore({
  //公共state对象，存储所有组件的状态
  state: {
    user:{
      name:''
    }
  },
  //唯一取值的方法，计算属性
  mutations: {
    getUser(state){
      return state.user;
    }
  },
  //异步调用mutations方法
  actions: {
    asyncUpdateUser(context,user){
      context.commit('updateUser',user)
    }
  },
  //唯一可以修改state值的方法，同步阻塞
  modules: {
    updateUser(state,user){
      state.user = user;
    }
  }
})

总结，vue2需要引用vue和vuex，而vue3下边只需要引用vuex，感觉vuex的写法更加简洁

三，在项目引用

在src/main.js文件引用vuex，如下

vue2如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import Vuex from 'vuex' //引用vuex
import storefrom './store' //引用vuex

const app = createApp(App)
app.use(Antd)
app.use(router)
app.use(Vuex) //引用vuex
app.use(store) //引用vuex
app.mount('#app')

vue3如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import store  from './store'

const app = createApp(App)
app.use(Antd)
app.use(router)
app.use(store )
app.mount('#app')

总结，vue2需要引用vuex和store，而vue3只需要引用store，所以vue3更加简洁

四，项目入口文件main.js引用了store之后我们就可以在项目中来使用vuex了

//记录user对象
this.$store.dispatch('asyncUpdateUser',{name:this.form.username})

//在需要的地方读取对象
this.$store.getters.getUser.name

//在模板中我们可以如下调用
{{ this.$store.getters.getUser.name }}

this可以省略如下：
{{ $store.getters.getUser.name }}

引用方法2，如果只是在个别页面调用，可以如下：

// 头部引用mapActions 
import { mapActions } from 'vuex'

在方法中调用
methods: {

...mapActions(['Login', 'Logout']), // 

  handleSubmit (e) {
    Login(loginParams) // 在方法里边就可以这样直接调用store里边的方法了
  }
}