一、数据共享解释

（仅代表个人想法，如有错误请指出）：当第一个页面把数据放到state中，因为Vue实例中的$store是全局的，相当于一个仓库，存储了state的属性名和属性值，就可以在任意位置的文件下将state中的数据取出来。

实例：

页面1：Box1.vue （在上篇文章写了）——>请点击此处

页面2：Box2.vue ——> 先完成页面基础结构以及基础布局

1. 在页面的button修改按钮中绑定click点击事件。changeName，修改的name值为‘安欣’，changeAge，修改的age值为40。

2. 在方法methods中定义两个方法，并用dispathch把最新值给到Actions，再通过Commit将数据提交给Mutations，修改页面中的数据。

<template>
  <div>
    <h2>Box2组件</h2>
    <div>name值：{{ name }}</div>
    <button @click="changeName('安欣')">修改name</button>
    <div>age值：{{ age }}</div>
    <button @click="changeAge(40)">修改age</button>
  </div>
</template>

<script>
// 引入辅助函数
import { mapState } from 'vuex'
export default {
    computed:{
        ...mapState({
            // ：左侧为自定义属性名  ：右侧为映射到state中的属性
            name:'name',
            age:'age'
        })
    },
    methods:{
        changeName(name){
            this.$store.dispatch('nameActions',name)
        },
        changeAge(age){
            this.$store.dispatch('ageActions',age)
        }
    }
}
</script>

<style>

</style>

此时，就能实现Box1页面的值传到Box2页面中，Box2的值也可以同步到Box1中。

二、mapActions辅助函数

可以使代码更简洁，程序员操作更方便。

格式： changeName是页面布局中的方法名，nameActions为js页面中与之对应的方法名。

    methods:{
        ...mapActions({
            // :左侧自定义方法  ：右侧映射到actions中的方法  值：字符串形式
            changeName:'nameActions',
            changeAge:'ageActions'
        })
    }

页面布局：

    <div>name值：{{ name }}</div>
    <button @click="changeName('安欣')">修改name</button>
    <div>age值：{{ age }}</div>
    <button @click="changeAge(40)">修改age</button>