Vue3 搭建vuex环境 使用store实现数据共享

 Vuex工作原理图

注： 修改state里的数据 需要通过dispatch接口 有两个参数 第一个是类型名 也就是actions里的方法名 第二个 是要传递的参数值 如果明确该参数的值是多少 则可以直接调用commit方法（图上没有标注这一条线 但是 是可行的） 不需要在通过diapatch 如果该参数的值需要发送异步请求也就是调用后端接口 才可以知道参数的值 不可以跳过这一步。

一、创建store对象并导出store

import { createStore } from 'vuex'

export default createStore({
  state: {
    name:'test',
    sum:0

  },
 
  mutations: {
  },
  actions: {
  },

// 应用时机：state中的数据需要经过加工后在使用时
 getters: {
    //应用示例 会自动接收一个state参数
 //  bigsum(state){
//   return state.sum*10
// }
  },
  modules: {
  }
})

二、使用store里面的数据

import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()  // 该方法用于返回store 实例
console.log(store)  // store 实例对象