小项目中vuex使用频率不太多我们完全可以用provide inject 来代替可以让项目小不少

在一般小型项目中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)

当然这个只是一个小的方法而且特别的简单 祝大家新年快乐

posted @ 2023-01-20 21:24  乔木滴滴  阅读(110)  评论(0)  编辑  收藏  举报