小项目中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)

巴特西

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

在一般小型项目中vuex实在是太浪费了所以我们可以用到 vue中的provide inject 代替

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

最新文章

热门文章

巴特西

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

在一般小型项目中vuex实在是太浪费了所以我们可以用到 vue中的provide inject 代替

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

最新文章

热门文章

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