How to have all the static strings in one place

问题:

I am creating a vue webapp, I have few pages with Dynamic content and also few pages which has mostly static content. I want to move all these static strings to one place.

One option can be to use vue-i18n or vue-multilanguage, these gives support to have content files like this, but I really have no use case of support of multiple languages, so it also seems a bit over kill to me.

Another option can be to have a vuex store for all the strings, vuex I am already using for state management.

What can be good approach to do this.

回答1:

I am not aware of a standard way of doing this, also this would be applicable to all the web frameworks. That said it is an interesting and valid problem.

If I had to do something about it:

1. I would want these strings to be available everywhere.
2. I would prefer not having to import these strings in all the components and each time I needed to use them.
3. I would want the storage space to be descriptive so that I don't have to go back and forth to check what I want to import. [The toughest part in my opinion]

To achieve 1, we can use:

1. Vuex
2. A services/some.js file which exports an object.
3. Plugins

I would go with plugins because:

I can get the strings by merely using this in a component, Vue.use(plugin) prevents the same plugin getting used twice, and at the same time achieve all the points (3rd will still be a tough nut to crack). Only disadvantage that I know of it might clutter the vue-instance.

So plugin can be designed like:

// stringsHelperPlugin.js
const STRING_CONST = {
  [component_1_Name]: {
    key1: val1,
    key2: val2,
    ....
  },
  [component_2_Name]: {
    key1: val1,
    key2: val2,
    ....
  },
  ...
}

StringConst.install = function (Vue, options) {
  Vue.prototype.$getStringFor = (componentName, key) => {
    return STRING_CONST['componentName'][key]
  }
}

export default StringConst

in main.js this can be used like:

import StringConst from 'path/to/plugin'

Vue.use(StringConst)

and you could use this in a component template like so:

<div>
 {{ $getStringFor(<component_1_name>, 'key1') }}
</div>

You can use something like this.$getStringFor(<componentName>, key) in a method. Pretty much everything that vuejs to has to offer.

Why I call the 3rd point hardest is: Maintainance if you ever change component names, you might also have to change it in the object returned by the plugin. This problem again, can be handled in many ways.

回答2:

You can make an npm module with JSON files containing your strings

回答3:

If you don't use vuex in your project, put your content in some javascript files which will be basically objects with all your static content and import them where you need just like Belmin menionted I am using Vue js and python flask as my backend. I want to have some local variable set. How can it be done?

A similar approach can be used for urls, configurations, errors etc.

If you use vuex, centralize everything there and make getters which you can use in each of your components.