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;
Related
The example on https://github.com/vuejs/vue-class-component (for the component syntax that's new in vuejs3) but I'm using straight type script instead of babel. I therefore tried:
<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
#Component({
props: {
propMessage: String
}
})
export default class MyComponent extends Vue {
helloMsg = "Hello, " + this.propMessage
}
</script>
Unfortunately, this.propMessage can't be found. How do I have to change the syntax to make it found?
I would guess this.props.propMessage would work (but i can't test it right now) and you may have already tried.
I recommend you using #Prop decorator from vue-property-decorator which provide a clearer syntax on the long-end.
It would give something like :
#Component
export default class MyComponent extends Vue {
#Prop() propMessage !: string;
helloMsg = "Hello, " + this.propMessage;
}
Good luck
Vue documentation gives an example of simple state management, for a single-file app:
const sourceOfTruth = {}
const vmA = new Vue({
data: sourceOfTruth
})
const vmB = new Vue({
data: sourceOfTruth
})
How to use the same mechanism for components?
I tried to move this concept of a minimal state manager to components in a codesandbox.io sandbox. It did not work and the more meaningful error, I believe, is
The "data" option should be a function that returns a per-instance value in component definitions.
Does this mean that components must be completely standalone and cannot rely on data managed outside of them?
try this Sandbox updated
in dataMaster.js
var store = {
state: {
message: "Hello!"
}
};
module.exports = store;
and component.vue
<template>
<div>
<h1>{{sharedState}}</h1>
</div>
</template>
<script>
import store from "./dataMaster";
export default {
name: "HelloWorld",
data() {
return {
privateState: {},
sharedState: store.state
};
}
};
</script>
The "data" option should be a function that returns a per-instance value in component definitions
It means that the data property you define in the component must be a function, and that function should return a per-instance value. You should, not any must here, and it can be tricked.
About the error, you got the error not because of state management, but because you forgot to export the function in dataMaster.js, so you couldn't import and use it in HelloWorld.vue. You got the error because you didn't return a function, that was the function part, not per-instance or anything related to state management.
To do the trick that I think you want, here it is: https://codesandbox.io/s/unruffled-carson-l3oui. You change the same source of truth directly from components, yet without tools like VueX or something. But it's tricky and is exactly what the error try to avoid, return a per-instance value. I don't know what the advantages and disadvantages of it yet, but at the end of the day, I think to do state management, we should use the standard recommended way from the prior people, like VueX, etc, just choose one from tons of them.
// dataMaster.js
const data = {
msg: "hello From dataMaster"
};
export default function dataMaster() {
return data // this is not "per-instance", they're the same across all instances
}
//Hello.vue
<template>
<div>
{{msg}}
<button #click="change">Change</button>
</div>
</template>
<script>
import dataMaster from "./dataMaster.js";
export default {
name: "HelloWorld",
data: dataMaster,
methods: {
change() {
this.msg = this.msg === "message1" ? "message2" : "message1";
}
}
};
</script>
"data" option should be a function, cause pure object could make data mess up. e.g when "sourceOfTruth" modified by componentA but you are focus on componentB, and you will confused. so please use "vuex" or "eventbus".
If you want to manage all data from global state. you should search and learn Vuex and Store Management.
Maybe using "Event Bus" is better for you example.
And you're wrong with this code, we always need to export the code.
export default function dataMaster() {
return {
msg: "hello from dataMaster"
};
}
Vue.js : how to load dependent components?
From router currently using component as follows:
import A from './A';
export default {
components : {
'new-comp-A' : NewCompA
}
}
...
But this renders the template before import causing errors. Is there a better way for loading dependencies?
The template uses the - did you register the component correctly.
Your casing is incorrect. Use either 'NewCompA' or 'new-comp-a' for the name.
In fact, it would be even easier to use
import NewCompA from 'wherever/the/component/is/defined'
export default {
components: {
NewCompA
}
}
Your template can then use either
<NewCompA></NewCompA>
<!-- or -->
<new-comp-a></new-comp-a>
See https://v2.vuejs.org/v2/guide/components-registration.html#Name-Casing
After looking at your code again, it does not seem normal. You are assigning the variable A to your component, but trying to import it with the variable NewCompA..
You need to change the following:
From this:
import A from './A';
export default {
components : {
'new-comp-A' : NewCompA
}
}
...
To this:
import A from './A';
export default {
components : {
'NewCompA' : A
}
}
...
and use it like this:
<new-comp-a>
"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 have a single file component with some data:
data () {
return {
myArray: [obj1,obj2,...obj10000]
}
}
Is it a good idea to have 10000 objects in the data array? If not, how can I import the large array in the single file component?
You can create it in a separate file and import to component.
const animals = [ //animals.js
{name:"tiger", weight:120},
{name:"elephant", weight:1000}
]
export default animals
In component
import animals from './path/to/animals.js'
export default {
data() {
return {
animals: animals
}
},
I found that use a separate json file is a good idea.
Simply create a seperate file in your folder structure under /src /components or wherever.
You shall have two files
data.js / data.json
ComponentName.vue
data.js file, could also be a data.json file.
export const data = [{},{},{}]
export default data;
To import use in any vue component ----
<template></template>
<script>
import data from './components/data'
*// in case folder structure is different use " ../ or ./ "*
</script>