I want to do this.$router.push(path) inside module file of vuex.
As this is not defined there, how could I perform this.
Just import the router and you'll be able to use it, like this:
import router from 'path/to/router'
router.push(path)
Why does it work like this:
In a Vue file, this is binded to the Vue object which is why you can use certain methods that are available there like $router or $store.
However in a normal JS file this is just binded to the global object that does not contain any of Vue's special functionality, which is why you have to import the router manually.
Related
How do I access the store on the Vue instance. Essentially, I and to do something like this:
Vue.store.dispatch('someAction')
or
Vue.$store.dispatch('someAction')
if you added vuex in your main.js
so you can do this.$store.dispatch('someAction')
also see this from vuex documentation
I had some problems trying out the vue3.
router is my custom.
import router from './router'
when i write
createApp(App).use(Antd,VueAxios,axios,qs,router).mount('#app')
The page does not load the correct page.Vue Router Looks like not working
but when i write
createApp(App).use(router,Antd,VueAxios,axios,qs).mount('#app')
it's working!
So why?
code:https://github.com/fangminghui/app_h5
app.use or createApp(App).use doesn't accept multiple plugin as parameters, it accepts only the plugin and its options if there's options :
createApp(App).use(thePlugin,options)
if you want to use multiple ones you should chain multiple .use like :
createApp(App).use(qs).use(router).use(VueAxios).use(Antd).mount('#app')
I have a vue.js application and in the main.js file I have configured the Vuei18n as per the documentation. This is working perfectly and in order to access this in other components, I have added this to new Vue() instance and this is now accessible (with this.$i18n).
Now I have created a validator.js file for validation rules and I need to use the this.$i18n there, but its not working. I have also tried Vue.prototype.$i18n but that too not working. Can someone help me to find out where I went wrong ?
exporting the i18n variable
I'll assume your app is a vue-cli app, or at least that you use webpack to build it
and therefore can use ES modules.
Working with vue-i18n you would do something like the following:
// step 1: define the i18n object via new Vue18n
const i18n = new VueI18n({
locale: DEFAULT_LANGUAGE,
messages,
});
// step 2: setup the Vue object to use this object:
new Vue({
i18n,
... store, router.... whatever
})
Where messages contain all the JSON's with the translations keys and values.
I guess you already are doing something like this.
And now, in your validator module you need the very same i18n object you plugged to Vue.
Instead of trying to get to Vue in your validator, you can just plain export the i18n varible from main.js:
export {i18n}
So, in your validator.js file, you can just import it:
import {i18n} from '#/main.js' // or whatever is the path
This is pretty much how I'm solving the validator internationalization problem in my own application.
Important note: circular dependencies
If you're already importing the validator.js in your main.js, you won't be able to import i18n from main in your validator module. To avoid such a problem, you would move the i18n initialization and exportation to another module, such as i18n.js, so the validator and the main file can import it independently.
Without es6 modules
In case you're not using webpack or another bundler to bundle your code, you can still just export the i18n object to the window object:
window.i18n = i18n
and then use it from whatever file. You just need to be careful to store the i18n object in window before any file will try to access it.
I think what you're looking for is Custom Events. According to this documentation, you should be able to emit your variable with something like below
this.$emit('send-i18n', this.$i18n)
Still according to the documentation, try to use v-on:send-i18n to retreive your value.
Hope it works.
I am new to vue and have a few questions around using a simple business object in my vue single page components. Let's stay I have an object called ResultCalculator. This is a simple javascript class that contains my core business logic for calculating something. Now assume I want to use this object in my Home.vue component. My questions are:
1) Is it best practice to simply create a new file called ResultCalculator.js and
export default class ResultCalculator {...}
2) In order to import this into Home.vue I use the import ResultCalculator from '....ResultCalculator.js'
3) In my create method, I simply new up a new object and assign it to this.resultCalculator.
The above is working for me, but is it best practice?
4) Now I'd like to reference some data in vuex state store. I doesn't seem like I simply use this.$store.getter. How do I reference vuex in this component?
Thanks
Sure, just create a js file and import it to your .vue files there is nothing wrong with that.
You can not use this.$store because in ResultCalculator.js this is not vue. You can either pass this.$store as an argument or just simply import your store to ResultCalculator.js
How can I use Vue.set() and Vue.use() in .vue files? I'm using the vue-cli to scaffold my project and I need to use Vue.use(VeeValidate) for validation. Also I would like to use something like following, found here.
Vue.set(example1.items, indexOfItem, newValue)
Since the .vue files export object, How do I get the Vue reference. Also I would like to use it inside my default object exported in .vue files. What I mean is that I need to use Vue.set() on an item present in my data function.
You have to use import wherever you need Vue or vee-validate, you can do it like following inside the script tag:
<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
...
...
</script>
If you just want to do Vue.set, you can instead do this.$set which is the alias of the global Vue.set.
Your components have Vue.set available as this.$set. For reference: instance methods & properties.
Vue.use is a global method and can be called wherever. It is basically never called inside a component(and might actually throw if you try? Never tried it). Call it wherever you're doing the rest of your initialization.