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即可。
