多组件共享数据

作者: 冰点雨 | 来源:发表于2022-04-14 12:59 被阅读0次

Vue中的组件数据共享问题和非父子组件的通讯
Vue现代化使用方法(四)--Vuex
Vuex 基本简单的使用
Provider使用记录
Vuex
Vue组件化开发
flutter状态管理(Provide)
Vuex学习
Vue 学习记录二
vue全家桶（4.1）

d73b7064865b99842c57e549b7edfc3.png

App.vue

<template>
  <div>
    <Count />
    <hr />
    <Person />
  </div>
</template>

<script>
// 引入组件
import Count from './components/Count'
import Person from './components/Person.vue'

export default {
  name: 'App',
  components: { Count, Person },
}
</script>

index.js

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入vuex
import Vuex from "vuex";
Vue.use(Vuex)
//准备actions-用于响应组件中的动作
const actions = {
  // jia(context,value){
  // //  console.log("actions中的jia调用了")
  //   context.commit('JIA',value)
  // },
  // jian(context,value){
  // //  console.log("actions中的jian调用了")
  //   context.commit('JIAN',value)
  //  },
  jiaOdd(context,value){
  //  console.log("actions中的jian调用了")
    context.commit('JIAODD',value)
   },
  jiaWait(context,value){
  //  console.log("actions中的jian调用了")
    context.commit('JIAWAIT',value)
   }
}
//准备mutations-用于操作数据（state）
const mutations = {
  JIA(state,value){
  //  console.log("mutations中的jia调用了")
    state.sum += value
  },
  JIAN(state,value){
  //  console.log("mutations中的jia调用了")
    state.sum -= value
  },
  JIAODD(state,value){
  //  console.log("mutations中的jia调用了")
    if (state.sum % 2) { 
        state.sum += value
    }
  },
  JIAWAIT(state,value){
  //  console.log("mutations中的jia调用了")
    setTimeout(() => {
       state.sum += value
    }, 500);
  },
  ADD_PERSON (state,value) { 
    state.personList.unshift(value)
  }
}
//准备state-用于存储数据
const state = {
  sum: 0,//当前的和
  school: '清华大学',
  subject: '前端',
  personList: [
    { id: '001', name: '张三' },
  ]
}
//准备getters-用于将state中的数据进行加工
const getters = {
  bigSum(state) {
    return state.sum*10
  }
}


//暴露、创建store
export default new Vuex.Store({
  actions: actions,
  mutations: mutations,
  state: state,
  getters:getters
})

Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }},学习{{ subject }}</h3>
    <h3 style="color: red">person组件的总人数是:{{ personList.length }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1, //用户选择的数字
    }
  },
  computed: {
    // 借用mapState生成计算属性，从state中读取数据（数组写法）
    ...mapState(['sum', 'school', 'subject', 'personList']),

    // 借用mapGetters生成计算属性，从getters中读取数据（数组写法）
    ...mapGetters(['bigSum']),
  },
  methods: {
    ...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),

    /* ************************************************ */
    ...mapActions({ incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' }),
  },
}
</script>

<style>
button {
  margin-left: 10px;
}
</style>

Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">count组件的和是:{{ sum }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
import { mapState } from 'vuex'
export default {
  name: 'Person',
  computed: {
    ...mapState(['personList', 'sum']),
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name }
      this.$store.commit('ADD_PERSON', personObj)
      this.name = ''
    },
  },
}
</script>

<style scoped></style>