跳到主要内容

用法​

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

返回的对象可以直接用 于渲染函数和计算属性内 ，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：

const state = Vue.observable({ count: 0 });

const Demo = {
  render(h) {
    return h(
      'button',
      {
        on: {
          click: () => {
            state.count++;
          }
        }
      },
      `count is: ${state.count}`
    );
  }
};

实用案例​

小型状态管理​

//Home.vue
<template>
  <div class="container">
    <button @click="setCount(count + 1)">+1</button>
    <button @click="setCount(count - 1)">-1</button>
    <div>store中count：{{ count }}</div>
    <button @click="changeName(name1)">父页面修改name1</button>
    <div>父页面 中 name： {{ name1 }}</div>
    <div>store 中 name： {{ name }}</div>
  </div>
</template>

<script>
import { store, mutations } from './store';

export default {
  data() {
    return {
      name1: '主页的name'
    };
  },
  computed: {
    count() {
      return store.count;
    },
    name() {
      return store.name;
    }
  },
  methods: {
    setCount: mutations.setCount,
    changeName: mutations.changeName
  }
};
</script>
// store.js
import Vue from 'vue';

export let store = Vue.observable({ count: 0, name: '李四' });

export let mutations = {
  setCount(count) {
    store.count = count;
  },
  changeName(name) {
    store.name = name;
  }
};