22~vue-如何进行状态管理

如何进行状态管理

不使用vuex的情况下, 利用provide/inject对状态进行集中管理; 小项目利用这个进行状态集中管理就可以, 大型项目才需要利用到vuex。

状态管理理解

状态可以理解为数据或者参数, 状态管理就是数据管理;状态管理就是把一些公共的参数或者数据进行集中管理。vuex的作用就是把一些共用的数据进行集中管理。

比如, 用户个人详情信息, 有很多组件都要共用, 每个组件使用用户个人详情信息数据时, 都要去调取一遍后端API,会非常不方便, 这个时候就需要状态管理了。

状态管理流程

01定义一个状态管理js文件

分离出状态管理文件, 方便项目维护, 文件位置和名称为: src/store/index.js
src/store/index.js

/**
 * 目标: 对状态集中管理,就是对数据进行集中管理
 * 
 * 不使用vuex进行的数据管理
 * provide/inject 跨界通信实现
 * 
 * 实现响应式
 * ref定义响应式变量/reactive定义响应式对象,对象里面存储这这些状态
 * 
 * 
 */
import { reactive } from 'vue'

const store = {
  // 先定义一个仓库出来, 里面有很多东西
  // 先定义一个响应式对象, 里面是存储的数据
  state: reactive({ //定义我的状态
    msg: 'hello World'
  }),
  // 定义一个方法, 改变状态
  updateMsg: function () {
    this.state.msg = "你好呀, 美好的世界"
  }
}
//如果在App组件中, 通过provide提供数据

//导出仓库, 供外部使用
export default store

02根组件App.vue引入仓库数据,并通过provide提供出去

<script>
import Home from './views/Home.vue'
// 01 引入仓库数据
import store from './store';
export default{
  // 02通过provide提供出去,供后代组件使用
  provide:{
    store
  },
  components:{
    Home
  }
}

</script>
<template> 
  <Home/>
</template>
<style></style>

03其他组件按需展示和改变数据

<template>
  <div>{{ store.state.msg }}</div>
  <p><button @click="updateMsg()">改变数据</button></p>
</template>
<script>
export default{
  inject:['store'],
  methods:{
    updateMsg:function(){
      this.store.updateMsg()
    }
  }
}
</script>