vuex技术多组件共享数据-vuex模块化+namespace

天空是连着的，如果我们也能各自发光的话，无论距离有多远，都能看到彼此努力的身影。

我们知道每一个组件都有自己的 data，那么多个组件如何共享数据？这就引出了 state 的概念，可以把多个组件共有的属性统一由state进行管理。但是组件并不能直接访问或操作state里的数据源，而是通过 mutations 来对数据源进行操作。而改变数据的行为触发由 Actions 来完成，Vue 为 actions的触发提供了一个 commit 的概念，由action 触发通过 mutations 对数据进行操作，从而改变 state 数据源。

通过：import { nanoid } from 'nanoid'来生成一个ID属性。
核心代码块：

methods:{
            add(){
                const personObj = {id:nanoid(),name:this.name};
                this.$store.commit('ADD_PERSON',personObj)
                console.log(personObj);
                this.name = ''
            }
        }
1
2
3
4
5
6
7
8

当我们开发的项目比较大时，store中的数据就可能比较多，这时我们store中的数据就可能变得臃肿，为了解决这一问题，我们就需要将store模块化（module），

即每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块

vuex模块化核心代码示例
开启命名空间，简化代码示例：

const countOptions = {
    namespaced: true,
    state: {
        sum: 0,
        name: '勇敢牛牛，不怕困难',
    },
    actions: {
        jiaodd(context, value) {
            context.commit("JIAODD", value)
        },
        jiaWait(context, value) {
            context.commit('JIAWAIT', value)
        }
    },
    mutations: {
        JIA(state, value) {
            state.sum += value
        },
        JIANJIAN(state, value) {
            state.sum -= value

        },
        JIAODD(state, value) {
            if (state.sum % 2 != 0) {
                state.sum += value
            }
        },
        JIAWAIT(state, value) {
            setTimeout(() => {
                state.sum += value
            }, 500)
        },
    },
    getters: {
        bigSum(tate) {
            return state.sum * 10
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

才可以使用简写，直接获取属性值

  ...mapState('a',['sum','name'])
1

在person组件中如果直接对commit操作。就在属性值前面加这个模块的名称

this.$store.commit('b/ADD_PERSON',personObj)
1

例如：

add(){
                const personObj = {id:nanoid(),name:this.name};
                this.$store.commit('b/ADD_PERSON',personObj)
                console.log(personObj);
                this.name = ''
            }
1
2
3
4
5
6

在【person中联系muttion修改数据】

this.$store.commit('b/ADD_PERSON',personObj);
1

最终的数据结构

index.js

//引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
//使用插件
Vue.use(Vuex)

//计算相关配置
import countOptions from './count'

// 人员相关配置
import personOptions from './person'

// 创建store
export default new Vuex.Store({
    modules: {
        a: countOptions,
        b: personOptions
    }
})

// export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

count.js

const countOptions = {
    namespaced: true,
    state: {
        sum: 0,
        name: '勇敢牛牛，不怕困难',
    },
    actions: {
        jiaodd(context, value) {
            context.commit("JIAODD", value)
        },
        jiaWait(context, value) {
            context.commit('JIAWAIT', value)
        }
    },
    mutations: {
        JIA(state, value) {
            state.sum += value
        },
        JIANJIAN(state, value) {
            state.sum -= value

        },
        JIAODD(state, value) {
            if (state.sum % 2 != 0) {
                state.sum += value
            }
        },
        JIAWAIT(state, value) {
            setTimeout(() => {
                state.sum += value
            }, 500)
        },
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}
export default countOptions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

person.js

import axios from "axios";
import { nanoid } from 'nanoid'
const personOptions = {
    namespaced: true,
    state: {
        personList: [
            { id: '001', name: '张安' }
        ]
    },
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            } else {
                alert('添加的人必须是姓王')
            }
        },
        addPersonServer(context) {
            axios.get('https://api.uixsj.cn/hitokoto/get?tyoe=social').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
                },
                error => {
                    alert(error.message)
                }

            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('muttion中的ADD_preson被调用了');
            state.personList.unshift(value)
        }
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    }
}
export default personOptions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

---

Person.vue

<template>
    <div>
        <h1>person</h1>
        <h2 class="one">count组件的求和为{{sum}}</h2>
        <h2>列表中第一个信息是：{{ firstPersonName }}</h2>
        <input type="text" name="" id="" placeholder="请输入名字" v-model="name">
        <button @click="add()">添加</button>
        <button @click="addWang()">添加一个姓王的人</button>
        <button @click="addServer()">添加一随机语句</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',
        data(){
            return {
                name:'',
            }
        },
        computed:{
            // personList(){
            //     return this.$store.state.personList
            // }
            ...mapState('a', ['sum']),
            ...mapState('b', ['personList']),
            firstPersonName(){
                return this.$store.getters['b/firstPersonName']
            }
        },
        methods:{
            add(){
                const personObj = {id:nanoid(),name:this.name};
                this.$store.commit('b/ADD_PERSON',personObj);
                console.log(personObj);
                this.name = ''
            },
            addWang(){
                const personObj = { id: nanoid(), name: this.name };
                this.$store.dispatch('b/addPersonWang', personObj)
                this.name = ''
            },
            addServer(){
                this.$store.dispatch('b/addPersonServer')
            }
        },
        mounted() {
            console.log(this.$store);
        }

    }
</script> 
<style>
    .one{
        color: rgb(68, 156, 233);
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

Count.vue

<template>
    <div>
        <h1>当前数值为:{{sum}}</h1>
        <h2>放大10倍后的数值是:{{bigSum}}</h2>
        <h3>{{name}}</h3>
        <h3 class="tow">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 {mapGetters, mapState , mapMutations,mapActions} from 'vuex'

    export default {
        name:'Count',
        data() {
            return{
                n:1
            }
        },
        methods:{
            ...mapMutations('a', { increment: 'JIA', decrement: 'JIANJIAN' }),
            ...mapActions('a', {incrementOdd : 'jiaodd',incrementWait:'jiaWait'}),
            
        },
        computed:{
           
            // ...mapGetters(['bigSum']),
            // ...mapState(['a','b'])
            ...mapState('a',['sum','name']),
            ...mapState('b', ['personList']),
            ...mapGetters('a',['bigSum']),
            

        },
        mounted(){                                                                          
            const x = mapState({name:'name'});
            
        }
       
    }

</script>  

<style scoped>
    button{
        margin-left: 10px;
    }
    .tow{
        color: rgb(68, 156, 233);
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

App.vue

<template>
   <div>
       <Count/>
       <Person/>
   </div>
</template>
<script>
    import Count from './components/Count.vue';
    import Person from './components/Person.vue'
	export default {
    name: "App",
    data() {
        return {
            data:1
        };
    },
    components: {Count, Person},
    mounted(){
        // console.log('app',this);
    }
}
</script>
<style scoped>
    

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

main.js

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

// 也就是创建了一个store
// 引入store
import store from './store/index'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
	el: '#app',
	render: h => h(App),
	store: store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20