2021-06-10 vue3中使用state.js文件，存储公共数据

在非大型单页面中存储公共数据

---

vue3中，在非大型页面中，并不支持使用vuex，vue3又不支持非父子组件传值，那遇到需要在多个页面中使用的数据是应该怎么办呢？
我们需要创建一个js文件，来代替vuex的作用

• 先要在url文件中创建一个utils文件，从中创建一个state.js文件
• 使用此代码，引入reactive模块

import { reactive } from 'vue'

• 在其中编写简单的state模式

// 编写一个简单的store模式
import { reactive } from 'vue'

const store = {
    debug: true, // 开启调试模式

    state: reactive({
        name: ''
    }),

    changeName(value) {
        this.state.name = value
    }
}

export default store

• debug: true 开启调试模式,开启一个调试模式，在有错误出现时，会立即报错
• const 名字 = {内部写的是所有的逻辑代码}
• 最后需要用export default 名字将内容暴露出来

之后我们需要在页面中进行使用

• 先在页面中引入该内容