vue-简单数据管理

vue开发的过程中，有一些数据是各个组件都需要使用的，这时候就需要将各种通用数据拿出来，进行集中管理。

在src文件夹下创建一个store文件夹，在这个文件夹下新建js文件，存放通用数据以及对通用数据的操作。

如何实现响应式

导入ref和reactive创建响应式数据，将操作这个数据的方法，也封装在store中

import {reactive} from 'vue'

const store={
    state:reactive({
        msg:'hellowrold',
       //从datachild组件中获取
        fetchlist:[],
    }),
    updateMsg:function(){
        this.state.msg='你好'
    },
    updateFetchlist(value){
        this.state.fetchlist=value;
        console.log(this.state.fetchlist);
    },
}

export default store

如何实现跨级通信

在app组件中通过provide导入数据，在DataChild子组件中通过inject中接收

<script>
import store from './store'
import DataChild from './views/DataChild.vue'
export default {
  provide:{
    store,
  },
  components:{
    DataChild,
  }
}
</script>

<template>
  <div>
   <DataChild></DataChild>
  </div>
</template>

子组件中

<template>
  <div>
    <h2>{{ store.state.msg }}</h2>
    <button @click="update">改变数据</button>
    <!-- 渲染 -->
    <ul>
      <li v-for="(item, index) in store.state.fetchlist" :id="index">
        {{ item.nm }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ["store"],

[官方demo:](Vue SFC Playground (vuejs.org))