美文网首页
VUE进阶 - observable

VUE进阶 - observable

作者: wyc0859 | 来源:发表于2020-04-26 22:55 被阅读0次

    observable可以用作简单场景的最小跨组件状态存储
    和provide/inject一样,也可以向其所有子孙后代调用,当更多是用于状态存储

    QQ截图20200426225432.png

    新建store.js

    import Vue from 'vue';
    export let store =Vue.observable({count:0,sex:'男'});
    export let mutations={
        setCount(count){
            store.count=count;
        },
        setSex(sex){
            store.sex=sex;
        }
    }
    

    index页面

    <template>
        <view class="content">
            <p @click="setCount(testCount + 1)">+</p>
            <p @click="setCount(testCount - 1)">-</p>
            <test />
            <p>页面:{{testCount}}</p>
        </view>
    </template>
    
    <script>
        import test from './test'
        import { store,  mutation} from '@/store'
        export default { 
          components: {
            test
          },
          methods: {
            setCount: mutation.setCount
          },
          computed: {
            testCount(){
              return store.count
            }
          }
        }
    </script> 
    

    test组件

    <template>
      <div>test组件
       <bb></bb>
      </div>
    </template>
    <script> 
    import bb from './bb'
    export default {
        components: {
          bb
        }
    }
    </script>
    

    bb组件

    <template>
        <view>
           bb组件:{{testCount}}
        </view>
    </template>
    
    <script> 
        import { store,  mutation} from '@/store'
        export default { 
             computed: {
               testCount(){
                 return store.count
               }
             }
        }
    </script> 
    

    相关文章

      网友评论

          本文标题:VUE进阶 - observable

          本文链接:https://www.haomeiwen.com/subject/lkbswhtx.html