Vue2.0 Vuex 多组件共享数据

多组件共享数据

前面的求和用Vuex的mapState、mapActions、mapMutations、mapGetters来写:

Count.vue(求和组件)

<template>
  <div>
      <h2>当前的值为:{{sum}}</h2>
      <h3>当前的值*10为:{{bigSum}}</h3>
      <select name="" id="" v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="JIA(n)">+</button>
      <button @click="JIAN(n)">-</button>
  </div>
</template>

<script>
    import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
    export default {
        name:'Count',
        components:{},
        data() {
            return {
                n:1
            }
        },
        methods:{
            ...mapMutations(['JIA','JIAN']),

            ...mapActions(['jadd','delayAdd'])
        },
        computed:{
            ...mapState(['sum']),
            ...mapGetters(['bigSum'])
        },
        mounted(){
            console.log(this)
        }
    }
</script>

<style scoped>

</style>

store > index.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const actions = {
    jia(context,value){
        context.mutations('JIA',value)
    },
    jian(context,value){
        context.mutations('JIAN',value)
    },

}

const mutations = {
    JIA(state,value){
        state.sum += value
    },
    JIAN(state,value){
        state.sum -= value
    }
}

const state = {
    sum:0,
    school:'bilibili',
    subject: 'Vue'
}

//准备getters:用于将state中的数据进行加工
const getters = {
    //给你要实现运算的值取一个名字
    bigSum(state){ //能接收到state的值
        return state.sum*10//跟计算属性类似:靠返回值来决定自己的值
    }
}

export default new Vuex.Store({
    actions,mutations,state,
    getters
})

main.js

import Vue from 'vue'
import App from './App.vue'

import store from './store'

Vue.config.productionTip = false

new Vue({
    store,
    render: h => h(App)
}).$mount('#app')

state里面已经有了sum;那我想把Person组件里的一些人存进去。然后在Person组件也把sum给读出来

实现: 一个数据所有组件都共享

创建Person组件。

Store > index.js(添加persons信息)

const state = {
    sum:0,
    school:'bilibili',
    subject: 'Vue',
    personList:[
        {id:'001',name:'张三'}
    ]
}

不用mapState写

<template>
  <div>
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" />
      <button>添加</button>
      <ul>
          <li v-for="p in $store.state.personList" :key="p.id">{{p.name}}</li>
      </ul>
  </div>
</template>

或者:

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

<script>
    import {mapState} from 'vuex'
    export default {
        name: 'Person',
        components:{},
        computed:{
            personList(){
                return this.$store.state.personList
            }
        }

    }
</script>

使用mapState写

Person.vue

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

<script>
    import {mapState} from 'vuex'
    export default {
        name: 'Person',
        components:{},
        computed:{
            ...mapState(['personList'])
        }

    }
</script>

但是我在person.vue里面直接写了数组方式就在后期能回避一个问题，想引出这个问题就先从自己写的开始:

自己写的处理(personList)

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

<script>
    import {mapState} from 'vuex'
    export default {
        name: 'Person',
        components:{},
        computed:{
            personList(){
                return this.$store.state.personList
            }
        }

    }
</script>

写添加用户逻辑 Person.vue

<template>
  <div>
      <h2>人员列表</h2>
      <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 {mapState} from 'vuex'
    import {nanoid} from 'nanoid'
    export default {
        name: 'Person',
        components:{},
        data() {
            return {
                name:''
            }
        },
        methods:{
            add(){
                //id可以用nanoid生成
                const personObj = {id: nanoid(),name: this.name}
                console.log(personObj)
                this.name = ''//清空输入框
            }
        },
        computed:{
            personList(){
                return this.$store.state.personList
            }
        }

    }
</script>

输入李四:

{id: 'uH8rCX6atZ9oOxW-JhHi-', name: '李四'}

这个数据得交给Vuex存进去。所以得在组件里面联系Vuex。我们这里又没判断，所以不必要写actions直接找打Mutations(注意:为了区分直接用大写)

store > index.js

const mutations = {
    JIA(state,value){
        state.sum += value
    },
    JIAN(state,value){
        state.sum -= value
    },
    ADD_PERSON(state,value){
        state.personList.unshift(value)
    }
}

改写Person.vue的add()方法:

add(){
    //id可以用nanoid生成
    const personObj = {id: nanoid(),name: this.name}
    this.$store.commit('ADD_PERSON',personObj)
    this.name = ''//清空输入框
}

但这没有实现数据共享

实现共享

1.我想在Count.vue里面读取personList

在Count.vue里面直接写:

computed:{
    ...mapState(['sum','personList']),
    ...mapGetters(['bigSum'])
},

模板里面直接写:

<div>
      <h2>当前的值为:{{sum}}</h2>
      <h3>当前的值*10为:{{bigSum}}</h3>
      <!-- <h1>Person组件的人有:{{personList}}</h1> -->
      <h1>Person组件的总人数有:{{personList.length}}</h1>
      .....
</div>

这样共享其实已经实现了

2.我想在Person.vue组件看一下Count.vue组件的求和为

<template>
  <div>
      <h2>人员列表</h2>
      <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 {mapState} from 'vuex'
    import {nanoid} from 'nanoid'
    export default {
        name: 'Person',
        components:{},
        data() {
            return {
                name:''
            }
        },
        methods:{
            add(){
                //id可以用nanoid生成
                const personObj = {id: nanoid(),name: this.name}
                this.$store.commit('ADD_PERSON',personObj)
                this.name = ''//清空输入框
            }
        },
        computed:{
            personList(){
                return this.$store.state.personList
            },
            sum(){
                return this.$store.state.sum
            }
        }

    }
</script>

第一种不嫌麻烦自己写；如果嫌麻烦就使用mapState…来帮你写

最后

以上就是高大信封为你收集整理的Vue2.0 Vuex 多组件共享数据的全部内容，希望文章能够帮你解决Vue2.0 Vuex 多组件共享数据所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。