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 <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> 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

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- $store.state -->
    <p>方式一 state中的name->{{$store.state.name}}</p>
    <p>方式一 state中的age->{{$store.state.age}}</p>

    <!-- $store.getters -->
    <p>方式一 getters中的getAge()->{{$store.getters.getAge}}</p>

    <hr>
    <p>方式二 state中的name->{{name}}</p>
    <p>方式二 state中的age->{{age}}</p>

    <p>方式二 getters中的getAge()->{{getAge}}</p>

    <button @click="onClickaddAge">更改年龄数据</button>
    <button @click="asynconClickaddAge">获取网络数据更改年龄</button>
  </div>
</template>

<script>
//方式二 import  mapState
import { mapState } from 'vuex';
//方式二 import  mapGetters
import { mapGetters } from 'vuex';

// import  mapMutations
import { mapMutations } from 'vuex';
//  import  mapActions
import { mapActions } from 'vuex';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  //computed  
  computed:{
    //State 简化写法
    ...mapState(["name","age"]),
    //getters 
    ...mapGetters(["getAge"]),

  },
  methods:{
    //mutations 简化写法
    ...mapMutations(["addAge"]),
    onClickaddAge(){
      //this.$store.commit 调用getAge 参数 20
     // this.$store.commit("addAge",20)

     this.addAge(1);
    },
    //actions
    ...mapActions(["asyncAddage"]),
    asynconClickaddAge(){
      // this.$store.dispatch()  调用 asyncAddage()
      //this.$store.dispatch("asyncAddage")

      this.asyncAddage();
    }


  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

代码：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

<template>
  <div class="about">
    <h1>关于-页面</h1>
    <!-- $store.state    直接引用  -->
    <p>方式一 state中的name->{{ $store.state.name }}</p>
    <p>方式一 state中的age->{{ $store.state.age }}</p>

    <!-- $store.getters -->
    <p>方式一 getters中的getAge()->{{$store.getters.getAge}}</p>

    <hr>
    <p>方式二 state中的name->{{name}}</p>
    <p>方式二 state中的age->{{age}}</p>
  </div>
</template>

<script>
//方式二 imper  mapState
import { mapState } from 'vuex';

export default {
  name: 'AboutView',
  //computed   获取State 中数据
  computed:{
    ...mapState(["name","age"])
  }
}
</script>