We Keep Coding

How to get all the function name from import file?

I have a bundle.ts file with a list of imports, for example:
import { addEvent } from './event/add.post';
import { removeEvent } from './event/remove.post';
import { updateEvent } from './event/update.post';
In another script, I like to loop through to get all the functions from bundle.ts
Is that possible?

If this is the only thing in the file you could do:
// file one: index.ts
export { addEvent } from './event/add.post';
export { removeEvent } from './event/remove.post';
export { updateEvent } from './event/update.post';
Then in another file:
import * as Whatever from './index.ts'
Whatever.addEvent(...)

How to use $axios Nuxt module inside of setup() from composition API?

The docs say to use this.$axios.$get() inside of methods/mounted/etc, but that throws TypeError: _this is undefined when called inside of setup(). Is $axios compatible with the composition API?
To clarify, I'm specifically talking about the axios nuxt plugin, not just using axios generically. https://axios.nuxtjs.org/
So for instance, something like this throws the error above
export default {
setup: () => {
const data = this.$axios.$get("/my-url");
}
}

import { useContext } from '#nuxtjs/composition-api';
setup() {
const { $axios } = useContext();
}

Alright, so with the usual configuration of a Nuxt plugin aka
plugins/vue-composition.js
import Vue from 'vue'
import VueCompositionApi from '#vue/composition-api'
Vue.use(VueCompositionApi)
nuxt.config.js
plugins: ['~/plugins/vue-composition']
You can then proceed with a test page and run this kind of code to have a successful axios get
<script>
import axios from 'axios'
import { onMounted } from '#vue/composition-api'
export default {
name: 'App',
setup() {
onMounted(async () => {
const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
console.log(res)
})
},
}
</script>
I'm not sure about how to import axios globally in this case but since it's composition API, you do not use the options API keys (mounted etc...).
Thanks to this post for the insight on how to use Vue3: https://stackoverflow.com/a/65015450/8816585

How to import an default exported object containing functions?

If one file has an export default:
export default {
function,
function2
}
How can I import these two functions in a separate file? When I try restructuring it with
import { function, function2 } from 'path'
I get an error saying function is not exported from 'path'

Since it's a default export, you will have to do it like below
export default {
function1,
function2
}
import Path from 'path';
Path.function1();
Path.function2();

Look into this ressource.
Basically, you can achieve this, by writing:
export const myExport1 = function
export const myExport2 = function2
And then:
import { myExport1, myExport2} from 'path'

vue.js : error unknown action type?

I created my store store/user.js
export const state = () => ({
user: {},
});
export const mutations = {
};
export const actions = {
AUTH ({commit},{email, password}){
console.log('email, password =', email, password)
}
};
export const getters = {};
component:
<template>
<form #submit.prevent="AUTH(model)">
<input type="text" required v-model.lazy = "model.email">
<input type="password" required v-model.lazy = "model.password" >
</template>
<script>
import { mapActions } from 'vuex'
export default {
data() {
return {
model:{
email:" " ,
password:" "
}
}
},
methods: {
...mapActions(['AUTH']),
}
}
In my component , I am trying to execute a vuex action from a module, but I am getting an error, even if this action is defined :
unknown action type: AUTH,
I don't have any idey about problem.
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user.js'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user
}
})

You need to use createNamespacedHelpers:
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('users')
Binding helpers with namespace
Otherwise, the mapping helpers need the full module namespace:
...mapActions([
'users/AUTH'
])
// if you are only using one module in the component
...mapActions('users', [
'AUTH'
])
Nuxt
You're mixing classic and modules mode. When using modules mode, Nuxt creates the store instance from the index.js file. You simply export the state, getters, mutations and actions. State should be exported as a function:
export const state = () => ({
foo: 0,
bar: 1
})
Any file within the store directory will be considered a module and Nuxt will automatically register it as a namespaced module.
- store
-- index.js // the store
-- users.js // module 'users'
-- foo.js // module 'foo'
The users module looks otherwise correct.
Make the following changes to your component:
// template
<form #submit.prevent="submitForm">
// script
methods: {
...mapActions({
auth: 'users/AUTH'
}),
submitForm () {
this.auth(this.model)
}
}

Vue.js Merge 2 files with methods

i have an api with routes about different topics, so i want to keep my api calls clean as possible. I try to import all the vue methods from 2 different files with 1 import.
What i tried do but not working is as following; I created 2 files that make api calls in vue methods: categories.js and expenses.js and i created an index.js file that wil import those files together. So on my main file i import the index.js file so i can use my methods from the expenses.js and categories.js file
I get the following: TypeError: this.getCategories is not a function
categories.vue
import * as API from '#/api'
export default {
mixins: [API],
mounted(){
this.getCategories()
}
}
index.js
import * as Categories from './categories.js'
import * as Expenses from './expenses.js'
export default {
Categories,
Expenses
}
categories.js
export default {
methods: {
getCategories(){
this.$http.get('api.example.com')
.then(response => {
// response
})
}
}
}
expenses.js
export default {
methods: {
getExpenses(){
this.$http.get('api.example.com')
.then(response => {
// response
})
}
}
}

Change your index.js to export an array:
import Categories from './categories.js'
import Expenses from './expenses.js'
export default [
Categories,
Expenses
]
Then changes the categories component to:
import API from '#/api'
export default {
mixins: API, // [...API, others, more] if using more mixins.
mounted(){
this.getCategories()
}
}