如何在 Framework7 Store 中查看变量答案

【问题标题】：How Do I Watch Variable in Framework7 Store如何在 Framework7 Store 中查看变量
【发布时间】：2021-04-27 15:17:28
【问题描述】：

我开始使用新的内置商店系统构建我的应用程序，并且我试图避免使用 vuex。我有一个经常变化的变量。我在使用 vuex 时使用了以下代码。

store.watch((state) => state.status, (newValue) => { self.status= newValue; });

我希望有一种方法可以在没有 vuex 的情况下做到这一点。非常感谢任何帮助。

<template>
  <f7-navbar>
    <f7-nav-left>
      <f7-link icon="icon-bars" href="/leftsidebar/" data-ignore-cache="true">
         <f7-icon ios="f7:menu" md="material:menu" aurora="f7:menu"></f7-icon>
      </f7-link>
    </f7-nav-left>
    <f7-nav-right>
      <f7-link icon="icon-bars" href="/connect/" data-ignore-cache="true">
         <f7-icon ios="f7:globe" md="material:public" aurora="f7:globe"></f7-icon>
      </f7-link>
      <f7-link icon="icon-bars" href="/rightsidebar/" data-ignore-cache="true">
         <f7-icon ios="f7:gear_alt_fill" md="material:settings" aurora="f7:gear_alt_fill"></f7-icon>
      </f7-link>
    </f7-nav-right>
  </f7-navbar>
</template>
<script>
  import store from '../js/store';
  export default {
    name: "pageheader",
    props: {
      f7router: Object,
    },
    data() {
      return {
        offline:true
      };
    },
    mounted(){
      var self = this;
      self.offline = store.state.offline;

      // This is where I am trying to create the watcher
      store.watch((state) => state.offline, (newValue, oldValue) => { 
         self.offline = newValue; });
      }
  };
</script>

更新：我已经包含了一个标题组件示例，我希望在其中查看我的商店中的离线状态。

【问题讨论】：

标签： javascript vue.js store html-framework-7

【解决方案1】：

大概，您的值 store.state 是由 Vuex 创建或使用 Vue.observable() 手动滚动的反应对象。除此之外，您还需要确保您的观察者在组件被销毁时也被销毁。如果您改用 Vue 的 this.$watch() API，则可以实现这一点：

<script>
import store from '../js/store';
export default {
  // ...
  mounted(){
    var self = this;

    // Keep `offline` in sync with store
    var off = self.$watch(
      () => store.state.offline,
      (newValue) => (self.offline = newValue),
      { immediate: true }
    );
  }
};
</script>

如果您使用的是 Framework7 的 Store，那么您需要使用他们的 useStore 帮助器来获取对您的状态的响应式引用：

<script>
import { useStore } from "framework7-vue"
import store from "../js/store"

export default {
  setup() {
    const offline = useStore(store, "offline")

    return { offline }
  }
}
</script>

见：Usage with Vue Components

【讨论】：

【解决方案2】：

在某些情况下，创建一个新值并使用 watcher 更新它可能很危险，因为组件可能有不同的数据源；在几分之一秒内，组件可能会在值更新之前保留以前的数据，而存储中的数据已经更新。 data must come from a single source 以防止每个组件具有不同的状态。这可能会导致意外的错误。

相反，我使用 Vue Observer 包装了一个 framework7 存储在 Vue 中的响应式。

// store.js
// create default framework7 store
import { createStore } from "framework7";

const store = createStore({
  state: {
    users: []
  },
  actions: {
    setUsers({ state }, data) {
      state.users = data;
    }
  }
});

export default store;

// -----------------
// vueStore.js
// wrap the framework7 store with Vue's reactivity function

import store from "./store";
import Vue from "vue";

// store.state becomes reactive
Object.defineProperty(store, "state", Vue.observable(store.state));

export default store;

// -----------------
// MyComponent.vue
<script>
import store from "./vueStore";

export default {
  name: "App",
  computed: {
    users: {
      // listen to an existing value,
      // instead of creating a new value and attach the watcher
      get() {
        return store.state.users;
      },
    },
  },
  methods: {
    updateUsers() {
      store.dispatch("setUsers", [1, 2, 3, 4]);
    },
  },
};
</script>

在此代码中，如果用户触发.updateUsers 方法，该值也会在组件中更新。

这是一个工作代码：

https://codesandbox.io/s/framework7-store-reactive-vue-tded6?file=/src/App.vue:182-457

【讨论】：