在一般小型项目中vuex实在是太浪费了所以我们可以用到 vue中的provide inject 代替
1.在vue3中我们先另起一个 文件创建一个全局的状态和方法的地方（如果你的全局状态特别的多记得要划分清楚 多来几个文件方便管理）
import {reactive} from 'vue'
export default {
state : reactive ({
BaseUrl:'http://47.122.16.71:3999/',
globalAvatarUrl:localStorage.getItem('globalAvatarUrl') || 'images/3.jpg' ,
globalUsername: localStorage.getItem('globalUsername') || '未获取到',
}),
ChangeUsername (value:string) {
this.state.globalUsername = value
localStorage.setItem('globalUsername',value)
},
ChangeAvatar (value:string) {
this.state.globalAvatarUrl = value
localStorage.setItem('globalAvatarUrl',value)
}
}
2.在App.vue中加上这个全局的注入就可以使用了 因为app是全局最外层的组件所以下面的小组件都可以调用这个里面方法可以使用函数来传递数据
import { provide } from 'vue'
import store from '@/store/index'
provide('store', store)
3. 调用数据和方法直接使用就好了 非常的好用
import {ref , inject } from 'vue'
const store: any = inject('store')
store.ChangeUsername('传递回的数据 ')
// 调用数据
console.log(store.state)