I have a folder called functions under src in the same level as store
below code is from account/index.js
import store from 'src/store/index.js'
export async function abc () {
console.log(store.state) //prints undefined
store.commit('account/updateToken', 'asdas')
}
I am getting below error on this code
Uncaught (in promise) TypeError: src_store_index_js__WEBPACK_IMPORTED_MODULE_11__.default.commit is not a function
Is there anything I am missing on how to import store to a .js file?
did you define the store in
store/index.js
you have to
import myStoreName from './myStoreFolderName'
and then in the module section add your store
modules: {
myStoreName,
Related
I've been trying to get storybook working with a Vue 2 + composition API project for a while now and I keep running into the error:
Unexpected error while loading ./ProductCard.stories.js: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
So I assume I need to include it before any file/story gets called.
When I try and import it into my storybook's main.js file like this:
import Vue from "vue";
import VueCompositionApi from "#vue/composition-api";
Vue.use(VueCompositionApi);
module.exports = {
//... storybook config
}
I get the console error:
import Vue from "vue";
^^^^^^
SyntaxError: Cannot use import statement outside a module
I've also tried:
const Vue = require("vue");
const VueCompositionApi = require('#vue/composition-api');
Vue.use(VueCompositionApi);
Which appears to work but I still get the top error [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
Does anybody know where I'm meant to import the composition API so it's loaded before it's called?
I've tried putting it in the preview.js file as well with the same error.
Whats causing it is the component ProductCard loads a composable called useUiStatewhich uses vue-composition-api.
I would have thought it's called vue.use already.
In early javascript project, we have created a file named kresource.js, its code is below
//kresource file, contains some functions
var kresource = (function () {
function kresource () {
}
kresource.getLang = function () {
console.log('en') //it's only a sample...
}
return kresource
})()
When in a html page, we can access the function by kresource.getLang(), but in a Quasar vue page, how can I import this file, and access the function?
//index.vue file
import kresource from '../js/kresource.js'
[Vue warn]: Error in created hook: "TypeError: _js_kresource_js__WEBPACK_IMPORTED_MODULE_0___default.a.getLang is not a function"
It isn't working because you need to use that code as a module instead of relying on var being global.
You need to add an export to your file. At the end of the file you need to put:
export default kresource
And in the file where you plan to use it:
import kresource from 'path to the file'
Notes: You can read more about modules in JS so you can understand better what is hapening, and also instead of var use const, since that variable is never reasigned and it is better to maintain the global scope cleaner.
I have a new Vue project by vue-cli3. When I used these commands, I got an undefined type error. Here's code
import Vue from 'vue'
The error message:
Uncaught TypeError: Cannot read property 'use' of undefined
When running console.log(Vue) in the browser shows "undefined" ,and I'm sure that I have installed Vue. Using absolute path to find Vue, but I don't see my node_moudles accessible folder in the code.
import Vue from 'vue'
import VueRouter from 'vue-router'
const Home = () => import('../views/home/home')
const Cart = () => import('../views/cart/Cart')
const Category = () => import('../views/category/Category')
const Profile = () => import('../views/profile/Profile')
console.log(Vue);
Vue.use(VueRouter)
Bowser report methods of use is undefined
Error on building angular library which uses dynamic imports.
When the library contains a file , which uses dynamic import to import a LazyModule,
import('./lazy/lazy.module').then(({ LazyModule }) => {
const MyComponent = LazyModule.entry;
....
The build will fail throwing error below.
Error: You must set "output.dir" instead of "output.file" when generating multiple chunks.
at error (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:3410:30)
at normalizeOutputOptions (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:17107:13)
at getOutputOptions (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:16865:24)
at Object.write (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:16957:43)
at Object. (c:\Development\rollup-test\node_modules\ng-packagr\lib\flatten\rollup.js:46:22)
at Generator.next ()
at fulfilled (c:\Development\rollup-test\node_modules\ng-packagr\lib\flatten\rollup.js:4:58)
Please export lazy.module in public-api.ts
I registered Moment.js as a plugin, like this:
import Vue from 'vue'
import moment from 'moment'
moment.locale('pt_BR')
Vue.use({
install (Vue) {
Vue.prototype.$moment = moment
}
})
Now, I need to use this in my main.js filters
import './plugins/moment'
Vue.filter('formatDate', value => {
return this.$moment(value, 'YYYY-MM-DD').format('DD/MM/YYYY')
})
Buth this return an error:
Error in render: "TypeError: Cannot read property '$moment' of
undefined"
Looks like you can not access this like in the vue components for filter methods.
By Evan You
This is intentional in 2.x. Filters should be pure functions and should not be dependent on this context. If you need this you should use a computed property or just a method e.g. $translate(foo)
I guess the best way is importing the moment on main.js like this:
import moment from 'moment'
Vue.filter('formatDate', value => {
return moment(value, 'YYYY-MM-DD').format('DD/MM/YYYY')
})
Vue.filter() creates a global filter before the Vue instance is created, a global filter does not have access to the Vue instance therefore you can not access this.$moment. If you need to access the vue instance, you'll need to register a local filter on components.
However, you could rectify this by directly referencing the module:
import moment from 'moment';
Vue.filter('formatDate', value => {
moment(value, 'YYYY-MM-DD').format('DD/MM/YYYY')
});