Cannot import a variable

[MRegnard]

Hi again!

Firstly, I rode your last message when you have to focus on other tasks, so, look at this issue only if you have time. I totally know it is not the more important.

There is some time I am totally blocked about a single problem: I cannot import a variable from players.js. I searched since the last time (3 weeks ago) an explanation in various forums, and no one can find an explanation. Theoretically, what I did is supposed to work. So, I think: maybe the issue is not only a python or Vue.js issue, maybe there is some specific point in your project which explains what I obtain, maybe you can get an idea of why there is a problem.

I added an export in players.js:

export let isNotesOpen = true;

// This export is the first line of the code. Note that this file ends like this:

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

Then, I tried to import this boolean in TownSquare.vue

import {isNotesOpen} from "../store/modules/players.js";

// Then, just to test it, I temporary edited two lines. This correspond to the lines 33 and 34 in your actual version
        <span v-if="session.isSpectator">{{ isNotesOpen }}</span>
        <span v-else>{{ isNotesOpen }}</span>

Trying to run it, there is no print of isNotesOpen's value. But, if I change it to print instead the value of a variable created in TownSquare.vue, this value is printed without problem. That means the issue is specifically on the import (or maybe in the export).

Once again, before to write this, I rode so many documentation, I open so many discussions in so many forums, no one seems to know where the problem is.
Since you know this code, do you have any idea of the problem?

Thanks in advance for answer, even negative one.

[bra1n]

I think you're going at it the wrong way. You don't want to add a variable outside of the VueX state manager's scope and importing it directly into a Vue component is not going to work either.
What you want to do is add it to the players state object and then access it from there within any component where you need it. To change the variable, you need to create a mutator function in the players.js. Here's a doc about this feature: https://vuex.vuejs.org/guide/state

[MRegnard]

Tell me if I understood.

1. I must use isNotesOpen like any variable in the state (exactly like isBluffsOpen which already exists)
2. I must import data() in players.js to use this boolean

If I really understood (and looking at your link, it seems I understood), then I have an issue using import {data} from "../../components/TownSquare.vue"; in players.js: this export is not found... Is it because the keyword "default" in the TownSquare's export? If it is, how do I import that?

[bra1n]

1.) No, isBluffsOpen is not a VueX state variable. It's a local component variable and it has nothing to do with the players.js. If you want to add a state variable in the (global) store, for example, you add it to the state object in index.js and then access it as usual from the local $store inside the components, just like it happens with isMenuOpen.
2.) Also no. You can't import local component variables into the VueX store. If you want to make changes to a VueX state variable from within a component, you need to call the state mutator that changes the state variable, like $store.commit("toggleMenu") which executes the store mutator.

[MRegnard]

I think we misunderstand each other.
What I wanna do is:

1. Have a boolean in the state. That's why I called "use isNotesOpen like any variable in the state (exactly like isBluffsOpen which already exists)" in my previous message. I already did it, this works and I can switch this value easily.

data() {
    return {
      selectedPlayer: 0,
      bluffSize: 3,
      swap: -1,
      move: -1,
      nominate: -1,
      isBluffsOpen: true,
      isFabledOpen: true,
      isNotesOpen: false         <<<
    };
  },

2. Access to this value in players.js. In this file, I only want to see the value of this boolean, I don't try to set it. So it is not the mutator I am looking for.

[bra1n]

Ah yes, my point still stands. players.js is a VueX state module and you can't look into components data properties from there. Which is why "isMenuOpen" is a state property, rather than a component data property. For what purpose would you need access to this property in the players.js?

[MRegnard]

For what purpose would you need access to this property in the players.js?

For the record, my goal is to add 4 "note roles" in more than the three bluffs, these roles can have many utilities (Storyteller's role if the plague doctor is dead, for example).
In my actual (local) version, in players.js, I redefined the function "nightOrder" such that I can print the night order of these four roles.
What I am trying to do, is this same function, is taking account the notes roles only if the boolean isNotesOpen is true.

I don't know if it is clear, so, for the example.

• If the notes are open, I got this (and it is what I want)
• If the notes are closed, I actually got this.
• If the notes are closed, I would like to have this instead.