Vue项目中简单的store模式

Vue大型项目中一般使用Vuex作为数据存储。但是小项目中存储几个共用数据大可不必使用Vuex。

示例

我在一个项目中创建了一个person.ts的文件，用来存储某个姓名。

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

接下来在A.vue组件中使用：

切记：在data中要使用person.state，不能直接取state里面的字段。否则不能同步更新！

<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>

其它组件也要用的的地方，同样引入person.ts即可。