Vue项目中简单的store模式

// 简单store模式管理暂存数据 使各个组件共用一个数据模块
const Person = {
  state: {
    name: ''
  },
  setName(name: string) {
    this.state.name = name
    console.log('set', this.state.name)
  }
}
export default Person

<template>
  <div>
    <div @click="changePersonName">person name: {{ shareState.name }}</div>
  </div>
</template>
<script>
import person from '@/store/person'
export default {
    data() {
        return {
            shareState: person.state
        }
    },
    methods: {
        changePersonName() {
            const random = Math.floor(Math.random() * 10)
            const name = 'joeal' + random
            person.setName(name)
        }
    }
}
</script>