从 Quasar 引导文件访问存储答案

【问题标题】：Accessing store from Quasar boot file从 Quasar 引导文件访问存储
【发布时间】：2020-06-25 19:01:11
【问题描述】：

我正在使用 Quasar，并且我有一个启动文件（与 main.js 基本相同）：

Vue.use(VueCurrencyFilter, {
  symbol: '$',
  thousandsSeparator: '.',
  fractionCount: 2,
  fractionSeparator: ',',
  symbolPosition: 'front',
  symbolSpacing: true
})

我可以在我的组件中做：

{{purchaseOrderTotal | currency(currentLocation.currency)}}

currentLocation 是我的商店中使用 mapState 调用的状态。

currentLocation.currency 是symbol 选项的货币。

这可行，但意味着我必须在每个组件中传递参数。

有没有办法在js文件中调用currentLocation.currency作为默认使用？

【问题讨论】：

标签： vue.js vuejs2 vuex quasar-framework

【解决方案1】：

在 Quasar 2 中，另一种方法是创建一个新的引导文件：quasar new boot file

在创建的文件 ../boot/file.(js|ts) 我们定义变量：mystore（如果我们想在您的函数中使用 store 和 router，也可以使用 myrouter）

我们从“导出默认值”初始化它们：

import { boot } from 'quasar/wrappers'

let myrouter = null;
let mystore = null;


/**
 * @param {Array} value 
 */
const redirectFromLogin = (value) => {
  
  if (value.length > 1) {
    //set routing
    myrouter.push("/multiple");
  } else {
    //set routing
    myrouter.push("/single");
  }
}


/**
 * @param {Array} userdata 
 */
const saveUser = (userdata) => {
  // Save user info in Store
  mystore.commit("userstore/setUser", userdata);

}


// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files

export default boot(async ({ app, router, store }) => {
  myrouter = router;
  mystore = store

})
export { saveUser, redirectFromLogin }

【讨论】：

【解决方案2】：

我忘记了 Quasar 中启动文件的剖析：

import VueCurrencyFilter from 'vue-currency-filter'

export default ({ Vue, store }) => {

    Vue.use(VueCurrencyFilter,
      .......
};

商店需要导出而不是导入。

【讨论】：

【解决方案3】：

您可以将 Vuex 存储导入任何模块：

import store from '@/store';

并在该文件中使用它，就像在组件中使用它一样：

let currency = store.state.currentLocation.currency;

这是可通过组件访问的同一 this.$store 对象。

【讨论】：

Quasar 在启动回调中提供存储作为参数，因此无需导入它。 quasar.dev/quasar-cli/boot-files#Anatomy-of-a-boot-file
@TonyO'Hagan Catmal 的回答不使用那种方法吗？这是一个适用于任何环境的通用答案。
如果有人要在 Quasar 2 中尝试这个，这将行不通。您将收到“找不到模块：无法解析导入的依赖项“@/store””。