将自定义存储注入应用程序

Question

Vuex 允许您将存储注入根实例，使其可以通过所有子组件中的this.$store访问。

如果没有 Vuex，是否可以将自定义存储实现注入到子组件中？

例如

// main.js
let app = new Vue({router, store, ...App}).$mount("#flightdeck-app")
export { app, store, router }
// SomeComponent.vue
export default {
  name: "Overview",
  components: { "credentials": Credentials },
  computed: {
    count() {
      // injected store; is currently undefined.
      return this.$store.state.items.length
    }
  },

尝试访问this.$store会导致子组件中未定义，因为 Vuex 似乎有额外的钩子来实现这一点。

Answer 1

你可以为 vue 创建一个自定义插件，注册初始化你的自定义存储（或者任何东西，我将创建一个记录器对象只是为了演示）。

例如，你可以有

//myLogger.js
export default {
  install(Vue, options) {
     function log(type, title, text) {
       console.log(`[${type}] ${title} - ${text}`);
     }
     Vue.prototype.$log = {
       error(title, text) { log('danger', title, text) },
       success(title, text) { log('success', title, text) },
       log
     }
  }
}

在你的主 Vue 实例告诉注册你的插件之前

//main.js
import Logger from './path/to/myLogger';
Vue.use(Logger);
var vm = new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

现在，您可以在任何子组件上调用this.$log

//myComponent.vue
export default {
  data() {
    return {};
  },
  methods: {
    Save() {
      this.$log.success('Transaction saved!');
    }
  }
}

希望对您有所帮助，有关更多详细信息，请参阅 Vue 插件文档

Answer 2

只需在组件文件中使用：

import store from './vuex/store.js'

1. 将您的商店放在单独的文件中以使其清晰。
2. 将商店导入到您需要存储的每个组件。