We Keep Coding

Call function in store.js from other js file in Vue

I use Vuex (store my data in store.js). On mutation I have a method 'autoUpdateDb' :
store.js :
import Vuex from "vuex";
import Vue from "vue";
import { serv } from "./serviceMixin";
Vue.use(Vuex);
export default new Vuex.Store({
mutations: {
autoUpdateDb(state, payload) {
functionA();
},
},
actions: {}
});
When I call the "autoUpdateDb" function I got an error "(void 0) is undefined" .
The location of "functionA()" in other js file - serviceMixin.js
serviceMixin.js :
functionA(){
console.log("Hello");
}
How should I call the requested function?
Regards and Thanks

Let the first file be First.js and second file be Second.js and both of them be in same folder. The below code is of File First.js
export default function FunctionOne(){
console.log("from file one")
}
Second.js
import FunctionOne from './First.js'
FunctionOne()

If you use a module loader like webpack, you need to import the function inside your store.js
const {functionA} = require('./serviceMixin');
Then export functionA
function functionA(){
}
module.exports = {
functionA
}

In your serviceMixin.js file you should define the function correctly by adding the function keyword and export it like :
export function functionA(){
console.log("Hello");
}
then in your store file import it in the top and call it in the action :
import {functionA} from './serviceMixin'
...
mutations: {
autoUpdateDb(state, payload) {
functionA();
},

Where to import other React component from if you are importing for Reacr component?

I have such folder hierarchy:
src/
components.tsx
components/
anyComponent.tsx
anyComponent1.tsx
components.tsx is the entry point:
export { Input } from './components/Input';
export { Label } from './components/Label';
export { Textarea } from './components/Textarea';
export { RadioButton } from './components/RadioButton';
export { ModernRadioButton } from './components/ModernRadioButton';
export { ModernRadioButtonGroup } from './components/ModernRadioButtonGroup';
What should I write in my anyComponent1.tsx that is located in the components folder?
import { anyComponent } from './anyComponent';
import { anyComponent } from '../components'; (entry point)

Result: Error. Dependency cycle detected.
Component1.tsx:
import { Button } from '../components';
components.tsx:
export { Button } from './components/Button';
export { Component1 } from './components/Component1.tsx
Result: Everything is fine.
components.tsx entry point is used for non-component files, for example App.tsx.
Component1.tsx:
import { Button } from './Button';
components.tsx:
export { Button } from './components/Button';
export { Component1 } from './components/Component1';

Running test cases to test a function using Jest

I am trying to test few test cases for a function where it takes two parameters. these two parameters along with the result I have defined it in three different files and then exporting it. I am using Jest for the same, but it is throwing "TypeError: (0 , _index.default) is not a function" error. Can some one tell where I am going wrong. Testing this in the sandbox
test file:
import appendToFilter from "./index";
import { res1, res2, res3, res4, res5, res6, res7, res8 } from "./Results";
import { src1, src2, src3, src4, src5, src6, src7, src8 } from "./Source";
import { ip1, ip2, ip3, ip4, ip5, ip6, ip7, ip8 } from "./Input";
test("case1", () => {
expect(appendToFilter(src1, ip1)).toBe(res1);
});
index.js
export function appendToFilter(filter, inputObjects) {
// logic here
}
Link: https://codesandbox.io/s/optimistic-mirzakhani-pogpw-so-b47y8

You are importing the function as a default import but you exported it as a named export. Go to your index.js and
export default appendToFilter
or import the function as the named import it is by doing:
import { appendToFilter } from "./index";
instead of:
import appendToFilter from "./index";

It's because you don't have any default export and you are importing appendToFilter from index without named import.
use
import { appendToFilter } from "./index";
instead of
import appendToFilter from "./index";

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'

Webpack module source code

I need to save the code of a es6 code module and dump it.
So ideally what I would need is something like:
import React, {PropTypes} from 'react';
// this function get the source code of the
// module I am running in
function getMyModuleSourceCode = {
...
}
class DemoComponent extends React.Component {
render() {
const myCode = getMyModuleSourceCode();
processMySourceCode(myCode);
}
}

If the module is in a different file, you can import twice, once normally to run code, once with the raw-loader to just pull in the file verbatim.
import module from './module'; //compiled code
import moduleSource from '!!raw!./module'; //source as text
The !! is necessary to override the existing loaders if you are just testing for .js extensions.

You could use the file-loader in webpack and then require whatever file you need in your function:
import React, {PropTypes} from 'react';
// this function get the source code of the
// module I am running in
function getMyModuleSourceCode = {
return require('!!file!./path/to/module.js');
}
class DemoComponent extends React.Component {
render() {
const myCode = getMyModuleSourceCode();
processMySourceCode(myCode);
}
}