When I run the project, it displays ReferenceError: getters is not defined as per following image:
app.js file:
store.js file:
What is problem causing this error?
Thanks.
You should use store.getters.variable_name to retrieve state value.
Sample code for retrieving accessToken:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
accessToken: null
},
getters: {
accessToken: state => state.accessToken
},
actions: {
doSomethingsHere({ commit }, somethingData) {
console.log('accessToken: ' + store.getters.accessToken)
}
}
})
export default store
Related
In the previous way of setting up inertia in a laravel app, I could tweak the resolve property in the `createInertiaApp function from:
{
...,
resolve: name => import("./Pages/${name}"),
...
}
To
{
...,
resolve: name => {
const page = require("./Pages/${name}").default
if(!page.layout) {
page.layout = DefaultLayoutFile
}
},
...
}
To allow me manually pass a default layout file to be used in pages.
But with Vite becoming the default asset bundler and according to the docs, I must use a resolvePageComponent function which takes in import.meta.glob as a second argument to instruct Vite which files to bundle.
Problem here is the import gets returned from this resolvePageComponent so I cannot access the default object like I normally will from a require function.
So I have not been able to attach a default layout file to imported pages.
Has anyone been able to find a workaround for this?
Assuming you imported your default layout file like this (remember to not use # in imports anymore as only relative paths work for static analysis reasons):
import DefaultLayoutFile from './Layouts/DefaultLayoutFile.vue'
You can use the following code to get default layout working with Inertia and Vite:
resolve: (name) => {
const page = resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
);
page.then((module) => {
module.default.layout = module.default.layout || DefaultLayoutFile;
});
return page;
},
[UPDATE 2022-08-01]
Since this is still receiving views, I though it would be useful to show how to get the # working in imports in Vite.
Require path below your imports in vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
const path = require('path')
And then add resolve into your config below:
export default defineConfig({
resolve:{
alias:{
'#' : path.resolve(__dirname, './src')
},
},
})
Now # will point to your Laravel root and you can import components dynamically from anywhere:
For example import LayoutTop from '#/Layouts/LayoutTop.vue'
will now point to
/resources/js/Layouts/LayoutTop.vue
Remember that Vite needs the .vue extension when importing Vue SFC files.
The async await version of the accepted answer
resolve: async name => {
const page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue"));
page.default.layout ??= DefaultLayoutFile;
return page;
},
This worked from me using the vite with inertia preset
import { createApp, h } from 'vue'
import { createInertiaApp } from '#inertiajs/inertia-vue3'
import { resolvePageComponent } from 'vite-plugin-laravel/inertia'
import DefaultLayout from '#/views/layouts/default.vue'
import SimpleLayout from '#/views/layouts/simple.vue'
import UserLayout from '#/views/layouts/user.vue'
createInertiaApp({
resolve: (name) => {
const page = resolvePageComponent(
name,
import.meta.glob('../views/pages/**/*.vue'),
DefaultLayout
);
page.then((module) => {
if (name.startsWith('auth.')) module.layout = SimpleLayout;
if (name.startsWith('user.')) module.layout = [DefaultLayout, UserLayout];
});
return page
},
setup({ el, app, props, plugin }) {
createApp({ render: () => h(app, props) })
.use(plugin)
.mount(el)
},
})
In laravel 9 with Inertiajs 3/vuejs 3 I pass parameter to vuejs side in control
public function index()
{
$rate_decimal_numbers = Settings::getValue('rate_decimal_numbers', CheckValueType::cvtInteger, 2);
\Log::info( varDump($rate_decimal_numbers, ' -1 $rate_decimal_numbers::') ); // I see valid value in log file
return Inertia::render('Home/Home',
['rate_decimal_numbers'=> $rate_decimal_numbers]
);
}
But I do not have this parameter in vue page :
<script>
import FrontendLayout from '#/Layouts/FrontendLayout'
import axios from 'axios'
import {$vfm, VueFinalModal, ModalsContainer} from 'vue-final-modal'
...
import {
getHeaderIcon,
...
} from '#/commonFuncs'
import {ref, computed, onMounted} from 'vue'
export default {
name: 'HomePage',
components: {
FrontendLayout,
...
},
setup(props) {
console.log('HOME props::')
console.log(props)
console.log('HOME props.rate_decimal_numbers::')
console.log(props.rate_decimal_numbers) // I see undefined here and next error.
Checking vue tab in my broswer I see :
https://prnt.sc/ZtLN6j2MWua0
and for my component:
https://prnt.sc/AcrSa3_7Yllw
but I see valid value in attrs :
https://prnt.sc/-VFRtomUHGt5
Why so and how that can be fixed ?
Please help me this problem, I'm doing on vue js v2 and i also new beginner but I have some issue with cannot read commit. When I login and redirect to my dashbaord by protect route
Can anyone help me?
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
authenticated: false
},
mutations: {
setAuthentication(state, status){
state.authenticated = status
}
},
})
export default store
method
methods: {
login(){
axios.post('/api/v1/login', this.form)
.then(response =>{
// this.$router.push('dashboard')
this.$store.commit('setAuthentication', true);
this.$router.replace({name: 'dashboard'})
})
}
}
try
$store.commit('{fileName}/{mutatorName}', value);
in your case
$store.commit('store/setAuthentication', true);
Try this one.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state : {
authenticated: false,
},
mutations: {
setAuthentication(state, data) {
state.authenticated= data;
},
},
})
this.$store.commit('setAuthentication',true);
Why when I use Vue.component to load the two commented components below, I get the following error in the javascript console while it works with import ?
Uncaught ReferenceError: dashboard is not defined
app.js:
Vue.component('left-menu', require('./components/LeftMenu.vue').default);
// Vue.component('dashboard', require('./components/foo/dashboard.vue').default);
// Vue.component('members', require('./components/foo/members.vue').default);
import dashboard from './components/foo/dashboard.vue';
import members from './components/foo/members.vue';
const routes = [
{
path: '/dashboard',
component: dashboard
},
// {
// path: '/members',
// component: members
// }
];
Because you use dashboard variable in your routes, this variable exists in "import way" but not in "Vue component way"
In the example that generates errors the components are not recognized as variables, so you should do something like :
const dashboard = {
template: `<div>Dashboard</div>` ,
}
const routes = [
{
path: '/dashboard',
component: dashboard
},
// {
// path: '/members',
// component: members
// }
];
I am learning Vue and trying to set one value in component during its creation from one Ajax request.
Here is the structure of src folder:
src
assets
components
Management.vue
router
index.js
vuex
modules
caseSuiteList.js
index.js
actions.js
getters.js
App.vue
main.js
Management.vue:
<template>
</template>
<script>
import {mapState} from 'vuex'
import store from 'vuex'
export default {
name: "Management",
computed: mapState({
suite_list: state => state.caseSuiteList.suite_list
}),
created(){
store.dispatch('refresh')
}
}
</script>
caseSuiteList.js:
import axios from 'axios'
const state = {
suite_list : {}
}
const mutations = {
refreshSuiteList(state, payload) {
state.suite_list = payload
}
}
const actions = {
refresh (context) {
axios.get('http://127.0.0.1:8601/haha').then(function(res){
console.log(res.data);
context.commit('refreshSuiteList', res.data);
}
});
}
}
export default {
state,
mutations,
actions
}
How to dispatch action of caseSuiteList.js in created() of Management.vue to make this happen?
Within the vue instance (or any component within) you access the store with this.$store.
Try dispatching in the created hook of your component.
created() {
this.$store.dispatch('refresh');
}
More information about Vuex: https://vuex.vuejs.org/guide/actions.html