Vue学习笔记62--多组件共享数据

多组件共享数据

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false

// 引入vuex、store
import store from './store'//默认引入index.js
new Vue({
  render: h => h(App), store
  
}).$mount('#app')

方式一：Vuex + 计算属性方式

示例一：src/store/index.js

// 该文件用于创建vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用插件
Vue.use(Vuex)

/*  准备actions--用于相应组件中的动作
1.context--miniStore
2.actions：建议逻辑处理在该处处理
3.如果没有业务路基处理，可直接使用mutations中对应的方法
 */
const actions = {
  incrementOdd (context, value) {
    if (context.state.sum % 2) {
      context.commit('Increment', value)//等价于Increment
      // context.commit('IncrementOdd', value)//等价于Increment
    }
  },
  incrementWait (context, value) {
    setTimeout(() => {
      context.commit('Increment', value)//等价于 IncrementWait
      // context.commit('IncrementWait', value)//等价于Increment
    }, 1000);

  },
}

/* 准备 mutations
用于操作数据(state)  
不建议写业务逻辑 
*/
const mutations = {
  Increment (state, value) {
    state.sum += value
  },
  Decrement (state, value) {
    state.sum -= value
  },
  IncrementOdd (state, value) {
    state.sum += value
  },
  IncrementWait (state, value) {
    state.sum += value
  },
}

// 准备state--用于存储数据(state中存放的就是全局共享数据)
const state = {
  sum: 0,//当前的和
  school: '高新一中',
  subject: '语数外',
  personList: [{ id: '001', name: 'zhangsan' }] //数组

}

// 准备getters--用于将state中的数据进行加工
const getters = {
  bigSum (state) {
    return state.sum * 10
  }
}

//创建store
// const store = new Vuex.Store({

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

Person.vue

<template>
  <div>
    <h3>人员信息列表</h3>
    <input type="text"
           placeholder="请输入姓名">
    <button @click="addPerson">添加</button>
    <ul>
      <li v-for="p in personList"
          :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Person',
  computed: {
    personList () {
      return this.$store.state.personList
    },
  },
  methods: {
    addPerson () {

    },
  },
}
</script>

<style>
</style>