vuex

Specify Vuex Store To Use In Component

巧了我就是萌 提交于 2021-01-29 07:26:28
问题 I have modularized my Vuex store and need child-components to be able to access data/use the same stores as their parent component. Here's what I've tried: <!-- ParentOne.vue --> <template> <div> <child-component vuex-store="services/opportunities" /> </div> </template> <script> import ChildComponent from '@/components/services/child-components/ChildComponent'; import { mapActions, mapState, mapGetters } from 'vuex'; export default { components: { 'child-component': ChildComponent, },

Vue - Calling store getter after dispatch completes?

烂漫一生 提交于 2021-01-29 06:57:47
问题 I'm using Laravel 5.7 + Vue2 + Vuex I am having some difficulty getting Vue to return a store value after my dispatch call completes. My application flow looks like this: I click a submit button which calls validate() on the component. Validate() dispatches to my "addLease" action which calls the store api in a Laravel controller. Laravel validates the data and returns a response with errors, or a success message. A commit is then performed to update the leaseStore state with the appropriate

Vue.js pass $store data from different modules

不羁的心 提交于 2021-01-28 21:31:37
问题 Hi I need to understand how to "pass" some $store values from settings module to header module, being the $store updated by settings module I have this app.vue module: <template> <v-app> <router-view name="sidebar" /> <router-view name="header" :handleSettingsDrawer="handleSettingsDrawer" /> <v-main class="vue-content"> <v-fade-transition> <router-view name="settings" /> </v-fade-transition> </v-main> <router-view name="footer" /> <app-settings-drawer :handleDrawer="handleSettingsDrawer"

How to change component rendered by router on state change in Vue?

爷,独闯天下 提交于 2021-01-28 11:26:42
问题 I have setup a Vuex store and router in Vue. Depending on a piece of state within this store, I would like the router to render a different component for the same path. Below is my attempt at doing this. Within my router, I include a conditional that is saying "if the user is logged in, return Home , otherwise return Login ". Within my Login component, I change the value of my loggedIn state (within the Vuex store) to true when the user successfully logs in. I have tested and can see this

store is not defined vue.js

半世苍凉 提交于 2021-01-28 09:41:14
问题 I have created login page. router intercepting the request and validates the user is authenticated or not . store is maintaining the user is logged in or not. while debugging i am getting in auth.js "store is not defined" I also tried relative path instead of @ in imports. router code snippet import auth from '@/services/auth'; ... router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!auth.loggedIn()) { next({ path: '/login', }); } else { next

this.$store is undefined following example application structure

微笑、不失礼 提交于 2021-01-28 08:23:01
问题 I'm trying to use Vuex as shown in the application structure documentation. However, $store isn't showing in Vue dev tools and returning undefined in my code. I've used the shopping cart example as a reference. import Vue from 'vue/dist/vue'; import store from './store'; import router from './router'; const app = new Vue({ el: '#app', store, router, computed: { loading() { return this.$store.state.application.loading.active; } } }); In store/index.js (following the example layout) I have:

How do I my App.vue page to the Vuex store?

ぃ、小莉子 提交于 2021-01-27 21:32:29
问题 I set up a Vuex store with getters,state and etc but I can't get the data from the store on my app component. my current code gives me this "Unexpected token <". App.vue <template> ... </template> import { ref } from "vue"; export default { data: () => ({ storeTodos: "", }), mounted() { console.log(this.$store); // this.storeTodos = this.$store.getters.getTodos; }, ... Main.js import Vue, { createApp } from "vue"; import App from "./App.vue"; import Vueex from "vueex"; Vue.use(Vueex); export

Every second Vuex commit to the same action is slow

徘徊边缘 提交于 2021-01-27 07:31:55
问题 I am using Vuex V3.0.1 with Vue.js v 2.5.17 The same action commit in vuex is slow exactly every second time. If I put the same axios request inside my component and call it from within the component, it is consistently between 16 and 22 ms. When I however dispatch to the store, every second request is consistently over 300ms. this.$store.dispatch('getQueryData', {QueryId: this.to.QueryId, params: data, CacheResults : this.to.CacheResults }).then(response => { this.options = response.data var

Every second Vuex commit to the same action is slow

寵の児 提交于 2021-01-27 07:29:07
问题 I am using Vuex V3.0.1 with Vue.js v 2.5.17 The same action commit in vuex is slow exactly every second time. If I put the same axios request inside my component and call it from within the component, it is consistently between 16 and 22 ms. When I however dispatch to the store, every second request is consistently over 300ms. this.$store.dispatch('getQueryData', {QueryId: this.to.QueryId, params: data, CacheResults : this.to.CacheResults }).then(response => { this.options = response.data var

How to set beforeResolve navigation guard in Nuxt.js

纵然是瞬间 提交于 2021-01-22 12:09:34
问题 Is there a way to add beforeResolve navigation guard in nuxt.config.js? My nuxt.config.js module.exports { ... router: { beforeResolve(to, from, next) { if (this.$store.getters.isLoggedIn) next('/resource') } } ... } But its never gets called! I've been trying to achieve a redirection before the component is mounted based on the users logged in state on the vuex store. 回答1: You have 2 options for this. You can set a global rule via the middleware or in the respective page. // middleware/route