如何在 Framework7 Store 中观察变量

Question

我开始使用新的内置商店系统构建我的应用程序，我试图避免使用 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>

更新：我提供了一个 header 组件示例，我希望在其中查看我商店的离线状态。

Answer 1

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

相反，我通过用 Vue Observer.

包装它，使 Vue 中的 framework7 商店具有反应性

// 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

Answer 2

据推测，您的值 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 的商店，那么您将需要使用他们的 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

如何在 Framework7 Store 中观察变量

How Do I Watch Variable in Framework7 Store

javascript

store

vue.js

html-framework-7