Update displayed vuex store without refreshing the page-CodePudding

I'm attempting to have variables displayed from my backend which automatically update. For transfering these variables I'm using vuex store and nuxt.config.js. And for changing the variables in the backend I'm using API calls. Currently, the data only updates when the page is refreshed. I display the variables by setting {{ this.$store.getters.getUserInfo.variable }} on the page of my frontend.

I've tried creating a mapstate computed function, and I tried setting the variable in the data() function. However, none have worked.

Backend API function

exports.getUser = (req, res, next) => {
    res.status(200).json({
        user: {
            username: loadedUser.username,
...

Frontend vuex store

export const getters = {
  getUserInfo(state) {
    console.log("State", state)
    return state.auth.user;
  }
};

Transfering the data with nuxt.config.js

  auth: {
    strategies: {
      local: {
        user: {
          property: "user",
          autoFetch: true
        },
...

CodePudding user response：

I think you should read about the "Mutation". https://vuex.vuejs.org/guide/mutations.html When you create a mutation, you can commit the new value to change the state

CodePudding user response：

this might help to understand the concept of vuex and it's usage uni-directional data flow