在Vuex中调用Framework7 $f7.router.navigate的最佳实践

Hey there! Your current approach of importing the Vue app instance to access $f7 works perfectly fine, but there are a few more elegant, maintainable ways to handle this scenario. Let’s break down the best practices:

1. Pass $f7 as a Payload to the Vuex Action #

This is the most decoupled approach—you explicitly pass the Framework7 instance from your component to the action when dispatching it. It keeps your store independent of the Vue app instance, making testing way easier (you can mock $f7 for unit tests without spinning up a full Vue app).

Component Code: #

// In your Vue component
this.$store.dispatch('login', {
  // Your existing login payload
  username: this.username,
  password: this.password,
  // Pass the $f7 instance directly
  f7: this.$f7
});

Vuex Action Code: #

actions: {
  login(context, { f7, ...payload }) { // Destructure f7 from the payload
    fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(payload)
    })
    .then(res => res.json())
    .then(res => {
      if (res.success === 1) {
        f7.router.navigate('/dashboard');
      }
    });
  }
}

2. Inject the Framework7 Instance into the Vuex Store on Initialization #

If multiple actions need access to $f7, you can inject the instance directly into your store when setting up your app. This avoids passing $f7 as a payload every single time.

Main App Setup: #

// main.js
import Vue from 'vue';
import Framework7Vue from 'framework7-vue';
import store from './store';

Vue.use(Framework7Vue);

const app = new Vue({
  store,
  // Your app config (router, etc.)
  mounted() {
    // Attach $f7 to the store instance
    store.$f7 = this.$f7;
  }
});

app.$mount('#app');

Vuex Action Code: #

actions: {
  login(context) {
    fetch('/api/login', { /* POST request config */ })
    .then(res => res.json())
    .then(res => {
      if (res.success === 1) {
        // Access $f7 directly from the store context
        context.root.$f7.router.navigate('/dashboard');
      }
    });
  }
}

For even cleaner separation, you can use a store factory function to pass the $f7 instance upfront:

// store/index.js
export default function createStore(f7Instance) {
  return new Vuex.Store({
    actions: {
      login(context) {
        // Use the injected f7Instance directly
        f7Instance.router.navigate('/dashboard');
      }
    }
  });
}

Then in main.js:

const f7 = new Framework7({ /* Framework7 config */ });
const store = createStore(f7);

new Vue({
  store,
  f7,
  // ... rest of your app setup
});

3. Create a Vuex Plugin to Inject $f7 #

For a scalable, reusable solution, build a tiny Vuex plugin that injects the $f7 instance into all store contexts. This mirrors how Framework7-Vue injects $f7 into Vue components.

Vuex Plugin Code: #

// plugins/vuex-f7.js
import Vue from 'vue';

export default function F7VuexPlugin() {
  return store => {
    // Attach $f7 to the store (make sure Framework7-Vue is initialized first!)
    store.$f7 = Vue.prototype.$f7;
  };
}

Store Setup: #

// store/index.js
import Vuex from 'vuex';
import F7VuexPlugin from '../plugins/vuex-f7';

export default new Vuex.Store({
  plugins: [F7VuexPlugin()],
  actions: {
    login(context) {
      fetch('/api/login')
      .then(res => res.json())
      .then(res => {
        if (res.success === 1) {
          context.$f7.router.navigate('/dashboard');
        }
      });
    }
  }
});

Which Approach Should You Pick? #

• Use payload passing if only a handful of actions need $f7—it’s lightweight and test-friendly.
• Inject into the store if many actions rely on $f7—it cuts down on repetitive code.
• Use a plugin if you want a clean, reusable solution across multiple projects or large codebases.

Your original method is totally valid, but these options offer better separation of concerns and flexibility.

内容的提问来源于stack exchange，提问作者Michael Warner