zoukankan      html  css  js  c++  java
  • Vue.observable简单实现公共状态管理

    store.js文件内部写法:

    import vue from 'vue';
    // 创建公共数据store
    export const store = vue.observable({ count: 0 });
    // 创建更改状态的方法,创建后在组件内直接使用,也可不使用,在组建内直接书写
    export const mutation = {
      setCount(count) {
        store.count = count;
      }
    }

    非父子组件list内部写法:

    <template>
      <div style="100%">
          <button @click="handle">更改数值</button> 
          <!-- 绑定公共状态值 -->
          <div>{{listCount}}</div>
      </div>
    </template>
    
    <script>
    import { store, mutation } from "../store";
    export default {
      name: "List",
      data() {
        return {
          
        };
      },
      methods: {
        handle() {
          // 更改公共数据
          store.count = "listVal";
        }
        // 这里也可以写成,二选一即可
        // handle:mutation.setCount
      },
      computed: {
        // 利用计算属性监听计算属性变化
        // 公共数据变化后,更新属性值
        listCount() {
          return store.count;
        }
      }
    };
    </script>
    
    <style lang="scss">
    </style>

    非父子组件home内部写法:

    <template>
      <div style="100%">
          <button @click="handle">更改数值</button> 
          <!-- 绑定公共状态值 -->
          <div>{{homeCount}}</div>
      </div>
    </template>
    
    <script>
    import { store, mutation } from "../store";
    export default {
      name: "Home",
      data() {
        return {
          
        };
      },
      methods: {
        handle() {
          // 更改公共数据
          store.count = "homeVal";
        }
        // 这里也可以写成,二选一即可
        // handle:mutation.setCount
      },
      computed: {
        // 利用计算属性监听计算属性变化
        // 公共数据变化后,更新属性值
        homeCount() {
          return store.count;
        }
      }
    };
    </script>
    
    <style lang="scss">
    </style>

    代码截图:

     

  • 相关阅读:
    C#拼音转换,将简体中文转换成拼音
    C#发送邮件
    textBox只能输入汉字
    IOS中UIScrollView的详细使用
    AngularJs学习教程
    IOS-简单计时器的使用
    IOS-多视图控制器之间的切换
    IOS播放音乐和音效
    Nodejs_day04
    Nodejs_day03
  • 原文地址:https://www.cnblogs.com/Alex-Song/p/12753748.html
Copyright © 2011-2022 走看看