Vue3 Vuex状态管理多组件传递数据简单应用

去官网学习→安装 | Vuex

cd 项目 安装 Vuex： npm install --save vuex

或着 创建项目时勾选Vuex         vue create vue-demo

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert
selection, and to proceed)
 (*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

运行示例：

 

 Vuex代码：store/index.js

// 引用 Vuex
import { createStore } from 'vuex'
// 引用 axios 网络请求 安装 cnpm install --save axios
import axios from 'axios';

//导出      在main.js 引用
export default createStore({
  //状态管理  通用的数据    数据改变时，组件中引用到此数据的内容都会发生改变
  state: {
    name:"张三丰",
    age: 198
  },
  //获取state中的数据  进行数据校验
  getters: {
    //自定义个方法 ,进行数据校验
    getAge(state){
      return state.age < 200 ? state.age: "张三丰只能活到200岁";
    }
  },
  //用于 更改state中的数据
  mutations: {
      //自定义个方法 ,进行数据修改 自定义参数numb
    addAge(state,numb){
      state.age +=numb;
    }
  },
  //Action 提交的是 mutation，而不是直接变更状态。
  //Action 可以包含任意异步操作。
  actions: {
       //自定义个方法 ,获取网络数据 进行数据修改 自定义参数numb
       asyncAddage({commit}){
        //http://www.csdnts.com/getTestData.jspx  域名是假的，后台接口已经处理了跨域问题
        //接口数据：[{"name":"张三丰","sex":"男","age":25},{"name":"周芷若","sex":"女","age":22}]
        axios.get("http://www.csdnts.com/getTestData.jspx")
        .then(res =>{
          console.log(res.data);
          //调用 mutations中 addAge方法  每次+25
          commit("addAge",(res.data[0]).age)
        })
        .catch(err =>{
          console.log(err);
        })
      }
  },
  //模块化管理vuex 允许我们将 store 分割成模块（module）。
  //每个模块拥有自己的 state、mutation、action、getter、
  //甚至是嵌套子模块——从上至下进行同样方式的分割
  modules: {
  }
})

代码：HelloWorld.vue

代码：main.js

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//router
import router from './router'
//vuex
import store from './store'

//.use(store)
createApp(App).use(store).use(router).mount('#app')

代码：AboutView.vue