Say, I have an object like {foo: 5, bar: 10} and I wanna export foo and bar from it separately, then when I do
import {foo} from './path/to/file';
I could get foo equal to 5, as if I did
export const foo = 5;
export const bar = 10;
How can I do it?
Exported values need their own top-level variable name. The easiest option might be something like this:
const obj = {foo: 5, bar: 10};
export const {foo, bar} = obj;
Really though, if the object is already declared in the file, you may be better off declaring the exports with the values directly.
Related
i would like to create a global mixin that is in a seperate file. all the tutorial i have seen online always place the mixin into the same file, or don't explain how to import another file.
mixins don't really make sense if they are all in the same file, so there has to be some way to load them from a different file, right?
here is my test mixin_test.js:
export default mixin_test = {
methods: {
test: function( msg )
{
console.log( msg );
}
}
}
in the app.js i have the following:
...
import mixin_test from "./mixin_test.js";
...
and in my component:
export default {
name:"something",
mixins: [mixin_test],
mounted(){
this.test( "hello world" );
}
}
if i open the page in a web browser i get the error message:
Uncaught ReferenceError: assignment to undeclared variable mixin_test
does anyone have any idea what the issue is?
default export isn't the same as named export and doesn't need to be specified with a name. default export is an expression. export default mixin_test = ... is the same as console.log(mixin_test = ...), this results in assigning to non-existent mixin_test variable.
It should be either:
export default {...}
Or:
const mixin_test = {...}
export default mixin_test;
i have a blog-post Form with a lot of input (about 20).
I should use state in this way:
const [title,setTitle] = useState('');
const [desc,setDesc] = useState('');
const [lang,setLang] = useState('');
.....
.....
OR in this way?
const [post,setPost] = useState({title:'',desc:'',lang:'',......})
I thought of using a reducer (useReducer()), but how should my reducer function be done? like this?
const myReducer = (state, action) => {
switch (action.type) {
case 'update_name':
return .....
case 'update_desc':
return ....
case 'update_lang':
return ....
case ...**and other 17 case**....
default:
return state;
}
};
If you are going to stick with useState you should definitely use the first one. Yes, that may mean you'll have a lot of declarations of useState. But consider this: suppose you need to move some state up or down the component hierarchy. If they are separate, then this is easy, you just move it and pass as props. If they're all in an object that you are accessing via e.g. the dot operator, then you're going to have to remember to change the access sites. It also makes for smaller cleaner git diffs (relevant if you're a professional developer on a team).
Another reason is that unlike setState for class components the setter function from useState does not automatically preserve unchanged object properties:
const [foo, setFoo] = useState({ baz: 2, bar: 3 });
setFoo({ baz: 5 }); // bar is now missing!
So you have to remember to do this instead:
setFoo({ ...foo, { baz: 5 } });
...every single time.
If you have a large group of related properties that you want to store in an object, have a look at useReducer instead. I generally prefer it except in cases of local state (e.g. whether something is checked, visible, etc.). For ephemeral local component state useState requires less ceremony.
"vue": "2.5.2",
"vue-loader": "15.4.2",
"webpack": "4.26.1",
// A.vue
export let a = 1
export default {
name: 'a',
data()(),
}
// B.vue
import A, { a } from './A.vue'
import A successfully;
But: "export 'a' was not found in './A.vue'
It must be because a let variable only works in the scope where is declared, try with a const as in:
export const a = 1
In ES6, export default is to export a single value (or function). If you need to export several things from your module, use named exports. Check the MDN doc
export A {
name: 'a',
data()(),
}
export let a=2
///in B.vue
import {A, a} from './A.vue'
I'm not sure that's the best approach though, I guess a Vue component should only export the component itself. And if you need another value, create a different module in a .js file somewhere. And if you need to share state between your components, use VueX instead.
I want to set a property, by using Vue.set() in Nuxtjs application.
editPost(post) {
Vue.$set(post, 'edit', true)
}
Got error: Vue is not defined
You can just use this instead of Vue.. This references the current vue component inside the method, so it will work same way:
editPost(post) {
this.$set(post, 'edit', true)
}
Sometimes you may want to assign a number of properties to an existing object, for example using Object.assign() or _.extend(). However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object:
// instead of Object.assign(this.someObject, { a: 1, b: 2 })
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
Isn't it possible to extend the template of an imported component installed via NPM?
I've tried this, but doesn't work.
import Foo from 'Foo'
export default {
extends: Foo,
template: `<p>foo</p>`
}
The .vue files export components definition only, so you are able to do something like this:
import Foo from 'Foo'
var Bar = {
// inherit everything from Foo
mixins: [Foo],
// rewrite the template
template: `<div>` + Foo.template + `</div>`
}
export default Bar
Keep in mind that Foo is just an object, it is just the definition of the component like the one you export in your own components, so you may feel free to use all it's options, but if you modify them you affect their usage in whole project. Think twice when doing things like:
Foo.template = `<div>${Foo.template}</div>`