vue store模式 数据共享

新建state.js文件

const person = {
  state: {
    aaa: 1111 // 存储共享数据
  },
  setAaa (val) { // 修改数据
    this.state.aaa = val
  }
}
export default person

在vue文件中引入state.js文件，
在多个页面中引入state.js文件就可以实现不同组件间的传值

<template>
  <div class="hello">
    {{ data.aaa }}
  </div>
</template>

<script>
import person from '../assets/state'

export default {
  name: 'HelloWorld',
  data () {
    return {
      data: person.state // 不可以直接指定字段，否则无法同步更新数据内容
    }
  },
  created () {
    console.log(this.data.aaa)
  },
  mounted () {
    person.setAaa('2222') // 修改数据
    console.log(this.data.aaa)
  }
}
</script>

输出内容