Vue-next: Basic store pattern example doesn't work

[corkt]

Version

3.0.0-alpha.1

Reproduction link

https://jsfiddle.net/fva48tsr/

Steps to reproduce

I tried out the basic store pattern example from the docs, but it doesn't ever update.

<template>
  <div>{{ sharedState.counter }}</div>
</template>

<script>
var store = {
  state: {
    counter: 0
  },
  increment: function() {
    this.state.counter  ;
  }
};

export default {
  data: function() {
    return {
      sharedState: store.state
    };
  },
  mounted: function() {
    setInterval(() => {
      store.increment();
    }, 1000);
  }
}
</script>

What is expected?

The counter goes up

What is actually happening?

The counter doesn't change

[underfin]

You should use ref or reactive api to make the data is observed in v3.

[limingzhiguang]

this.state.counter ++

[sys-keys]

The issue is that your this in increment is refering to the unproxied state object so vue does not track changes made through it.

Working version here

[yyx990803]

In Vue 2, plain objects are converted in-place to become reactive. But in Vue 3, due to the use of proxy-based reactivity system, the original object and the reactive proxy have different identities.

So:

import { reactive } from 'vue'

const a = { count: 0 }
const proxyA = reactive(a)

console.log(proxyA === a) // false

So in Vue 3, if you want to define a standalone reactive object, the recommended approach is to always explicitly wrap it with reactive at creation (and essentially never use the original object):

const store = reactive({
  state: {
    counter: 0
  },
  increment: function() {
    this.state.counter  ;
  }
})