Как я могу обновить значение в VueJS из запроса api, чтобы мои кнопки обновлялись без загрузки страницы или нажатия кнопки, или есть другой способ?

#javascript #python #api #vue.js

Вопрос:

я попытался решить проблему с помещением while(true) внутрь созданного, чтобы он всегда обновлялся, часто отправляя запросы в flask. Есть ли другой способ обновить мою ценность?

Vue:

         let app = Vue.createApp({
      data() {
        return {
          session: null,
          showAcc: "",
        };
      },
    
  created() {
    this.fetchLog()
  },

  methods: {
    async fetchLog() {
      let response = await fetch("/logstat");
      if (response.status == 200) {
        let result = await response.json();
        this.session = resu<
        if (this.session != null) {
          this.showAcc = "";
        } else {
          this.showAcc = "none";
          setTimeout(this.fetchLog, 500); // repeats the action if nothing comes
        }
      }
    },
    logIn() {
      this.$router.push("/login");
    },
    logOut: async function () {
      console.log("Logging out...");
        let response = await fetch("/logout");
        if (response.status == 200) { 
          this.session=null; 
          this.$router.push("/login");
        }
    },
 

…. И колба-это всего лишь базовый ответ на возврат сеанса:

     @app.route('/logstat', methods=["GET"])
def logstat():
    '''Checking if user is authorised/session, returning username if so'''
    username = session.get("userid", None)
    return json.dumps(username)

@app.route("/logout")
def logout():
    '''Ending session/logout from account'''
    session.pop("userid", None)
    return 'OK'
 

И в моем index.html

 <div v-if=(session) @click='logOut'>
                <p>Logged in as: {{session}} </p> <input type='submit' class='log_info_button pointer' name='submit'
                  value='LOG OUT' /> <i class='fa fa-sign-in' aria-hidden='true'></i>
              </div>
              <div v-else @click='logIn'> <input type='submit' class='log_info_button pointer' name='submit'
                  value='LOG INN' /> <i class='fa fa-sign-in' aria-hidden='true'></i></div>
            </div>
 

То, что я ищу, — это метод, позволяющий моим кнопкам входа и выхода обновляться в зависимости от статуса «сеанса», если есть идентификатор сеанса, то появится выход из системы. если значение равно нулю, то войдите в систему.
Может быть, есть другое значение, которое может помочь мне вместо sessionid?

this.showAcc предназначен для отображения ссылки «Моя учетная запись» в навигационной панели. Это также зависит от сеанса.

Ответ №1:

если вам нужно обновить эту информацию, чтобы сделать это в бэкэнде (или прокси-сервере, если на то пошло), это определенно не идеальный способ.

Если вам нужно прекратить опрос серверной части, как только вы получили информацию о сеансе, то это то, что вы можете сделать вместо этого:

   ...
  data: {...},
  created() {
    fetchLog()
  },
  methods: {
    async fetchLog() {
      let response = await fetch("/logstat");
      if (response.status == 200) {
        let result = await response.json();
        this.session = resu<
        if (this.session != null) {
          this.showAcc = "";
        } else {
          this.showAcc = "none";
          this.fetchLog(); // repeats the action if nothing comes
        }
      }
    }
  }
  
 

Это исключило бы необходимость в тайм-ау для колбы.

P.S.: если вы хотите, вы также можете установить небольшой тайм-аут для вызова this.fetchLog() , например setTimeout(this.fetchLog, 500) , на полсекунды. В идеале, однако, вам также нужно будет сохранить этот идентификатор тайм-аута и с его помощью выполнить clearTimeout выход (вкл unmount .или destroy ).

Комментарии:

1. Идея состоит не в том, чтобы обновлять, а в том, чтобы обновлять значение. Я вижу, что /logstat вызывается только тогда, когда я нажимаю или обновляю страницу. Я хочу, чтобы он обновлялся сам по себе. Но по какой-то причине это не так.

2. В этом случае я могу порекомендовать последний подход, вызвав его снова с тайм-аутом. Я также думаю о подключении к websocket, но это немного сложнее.

3. Огромное спасибо. Это действительно помогло. Я также немного изменил свои методы.

4. Можно ли использовать sleep(0.5) в flask для запроса /logstat вместо setTimeout или это не так часто используется?

5. Независимо от того, работает это или нет (хотя так и должно быть), задержка вашего внутреннего ответа вместо внешнего запроса не является обычным решением для таких случаев

Ответ №2:

обычно это вызвано использованием this ключевого слова в обратном вызове ответа/ошибки, относящегося к самой функции, а не к экземпляру Vue; Вы можете решить эту проблему с помощью

  1. Назначьте значение this другой переменной и используйте эту переменную в обратных вызовах

также попробуйте проверить статус входа в систему, когда экземпляр был смонтирован, если только срок действия вашей сессии не истечет довольно быстро, не будет необходимости постоянно проверять статус входа в систему.

     mounted: function(){
      this.checkSession();
    },
    methods:{
      checkSession: async function(){
         let _this = this;
         let response = await fetch("/logstat");
         if (response.status == 200) {
          let result = await response.json();
          _this.session = resu<
          _this.showAcc = this.session != null ? "" : "none";
         }
        }
    }
 

Комментарии:

1. Для чего используется_? Можете ли вы объяснить немного подробнее: «Обычно это вызвано использованием этого ключевого слова в обратном вызове ответа/ошибки, относящемся к самой функции, а не к экземпляру Vue»?

2. Я пробовал, но он все еще не обновляет мои кнопки. Мне нужно освежиться .

Ответ №3:

Очень необычно, что веб-сайт обновляет текущее состояние входа в систему без взаимодействия с пользователем, в любом случае, всякий раз, когда я хочу, чтобы мой сервер обновлял мою страницу, я использую websocket.