Reactivity of Session

help
1

Why does the following code not react to the changes in Session?

<template>
  <div>
    <v-btn @click="incCounter()">Increase counter</v-btn>
    <p>Counter: {{ getCounter }}</p>
  </div>
</template>

<script>
import { Session } from "meteor/session";
export default {
  mounted () {
    Session.set('counter',0);
  },
  methods: {
    incCounter () {
         let i=Session.get('counter');
          Session.set('counter',i+1);
       },
  },
  computed: {
    getCounter () {
          return Session.get('counter');
        },
  }
}

The counter is increased but the page is not updated

2

Look at the example, this isn’t how you use meteor

3

Well, my question was not how this example should be done in Meteor, but why this example doesn’t exhibit the reactivity I would expect according to the Meteor documentation.
In my application I have many components and I want any of these to react to a few types of changes made by any other. Session seems to be a simple way to achieve this without the overhead of Vuex and without maintaining a complex cross-component signal/prop messaging chain.
The example I gave just boils the problem, I encounter with the Session approach, down into a single component, despite, of course, the expected behavior could be achieved within a single component in more simple ways.

4

Use the starter app to see, meteor uses /client and /server, you can’t build like this afaik. Not how it’s used.

5

Not sure what you mean. I don’t need any additional communication with the /server.
Neither the Meteor Vue Tutorial (https://vue-tutorial.meteor.com/) which I started from, nor the Meteor Starter App (https://www.meteor.com/tutorials/blaze/creating-an-app) (afaik) handles client-side-only cross-component synchronization except for closely coupled components. The starter app has a chapter on ReactiveDict but that is in the starter app (unlike Session) tied to a particular template, so I wouldn’t consider it for cross-component sync.
Also, ReactiveDict seems to be an updated(?) version of Session, the reactivity of which (as my initial question shows) I still don’t understand from the documentation.

6

That’s why I’m saying check the sample it ain’t this chief.

7

You can see all the vue code here for creating a button and how the app should be setup - just fork the repo and add the session code into the main.js

8

Hi, truedon,
it would be great if you could just point me to an example implementing best practice for long-distance sync of Vue components in Meteor or could at least answer my initial question.
And, b.t.w., I prefer implementing my buttons with vuetify.

The git repo you point me to builds but running it throws the error
“You are using the runtime-only build of Vue where the template compiler is not available.”
Launching it says “A patch (Meteor 1.4.4.6) for your current release is available!” - I am using Meteor 2.3.1.

When I try to re-build the files in my project it throws the error
"Error in created hook: “Error: Meteor data ‘data’: You must provide a function which returns the result.”
The respective code

meteor: {
  data: {
      count() {
        return Session.get('counter');
      }
    }
}

is copied from the repo you referenced.

I cannot believe that it should be easier implementing a hack than finding a recommended solution working.

9

Solution: A Vue store pattern does what the Meteor Session promises. The definition of the store should be placed in the script of the root component and assigned to a name inside the data of the root component. Then the store can be accessed from any component using this.$root.$data.name and computed properties using the store react to changes in the store.

10

Hope you got it sorted, I’ve worked on vue several years back but mainly just in React now. Best way is to find the examples and take it from there - in some cases they do brake their own examples in some projects so you can raise an issue in the repo for that. I have run into that frequently in the meteor space people often deploy code without checking the examples it seems. It is more common then not. If the example doesnt work and you cant find anything that does, high chance the project isnt worth using. Hope you find a fix!