vue3使用vuex

一. 项目的src文件夹下，新建一个store文件夹，在store文件下新建一个index.js文件，如下图

二. index.js代码结构如下图：1、导入createStore；2、定义一个store对象；3、导出store

import { createStore } from 'vuex'
 
const store = createStore({
  // 定义vuex保存的值
  state: {
  },
  // 修改vuex存的值，同步
  mutations: {
  },
  // 修改vuex存的值，异步
  actions: {
  }
})
 
export default store

三. 定义vuex变量和添加修改vuex变量的同步、异步方法

import { createStore } from 'vuex'
 
const store = createStore({
  // 定义vuex保存的值
  state: {
    loginId: '', // 登录人id 保存到全局的登录人id
    loginName: '', // 登录人name 保存到全局的登录人name
  },
  // 修改vuex存的值，同步
  mutations: {
    // 保存登录人id 保存全局的登录id
    saveLoginId (state, id) {
      state.loginId = id
    },
    // 保存登录人name 保存全局的登录name
    saveLoginName (state, str) {
      state.loginName = str
    },
  },
  // 修改vuex存的值，异步
  actions: {
    // 保存登录人id 保存全局的登录id
    saveLoginId ({ commit }, id) {
      commit('saveLoginId', id)
    },
    // 保存登录人name 保存全局的登录name
    saveLoginName ({ commit }, str) {
      commit('saveLoginName', str)
    },
  }
})
 
export default store

四. 在页面使用vuex，1、导入useStore，在setup里定义一个store；2、直接使用就store.state.loginId；3、修改vuex的值就store.dispatch('saveLoginName', '陈茵')

<template>
  <div>
  </div>
</template>
 
<script>
import { useStore } from 'vuex'
 
export default {
  name: 'orderList',
  setup () {
    const store = useStore()
    const state = reactive({
      loginId: ''
    })
    onMounted(() => {
      state.loginId = store.state.loginId // 直接使用vuex存的值
      store.dispatch('saveLoginName', '陈茵') // 修改vuex的值
    })
    return {
      store,
      ...toRefs(state)  
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>