vuex

Vue.js / Vuex + axios sends multiple PUT Request

由 允我心安 提交于 2021-02-10 19:59:15
问题 The user on my SPA is able to add/update and delete groups. I've set up a Vuex store and an API helper module. In the EditGroup component, a method gets executed when the user press "save changes". The issue is, axios sends 5 to 20 PUT requests but the method gets executed only once. On a GET, POST or DELETE request axios sends one request. In my EditGroup component: saveSelected : function () { this.$store.dispatch(ACTION_PUT_GROUP, { data : this.selected }); }, In my Vuex store:

How to improve performance while using dynamic components in vue?

由 时光怂恿深爱的人放手 提交于 2021-02-10 16:14:41
问题 Context: Currently, I am working on a complex editor application which uses vuex state, vuetify's expansion panel and vue's dynamic component. Each dynamic component uses data which is accepted as props and has its own nested components. Problem: The issue with this approach is as the app deals with the large, nested state, the add operation in the UI slows down and makes the UI unusable. Note: In the example, I have added 1000 objects just to replicate the issue. Unfortunately cannot use

darkmode with vuex and save in localstorage

由 有些话、适合烂在心里 提交于 2021-02-10 14:21:51
问题 I have a chrome bug telling me Write operation failed: computed property "isDark" is readonly. my mutation create a DarkMode key in the locastorage and I also create a store that checks if DarkMode exists in the localestorage it works but if I refresh the page the mutation is inverted for example if in the localestorage darkMode is true if I click on the toggle the mutation is also a true then what should return false My Page <div id="home"> <div class="toggleTheme"> <ToggleBtnTheme labelOn=

Access to this.$apollo from Vuex store with vue-apollo in NUXT?

由 喜夏-厌秋 提交于 2021-02-10 13:59:45
问题 I want to store the user that comes from the login on an action in the vuex store. But there is no access to this.$apollo . export const actions = { UPSERT_USER({ commit }, { authUser, claims }) { this.$apollo .mutate({ mutation: UPSERT_USER_MUTATION, variables: { id: user.uid, email: user.email, name: user.name, picture: user.picture, }, }) } Thanks! 回答1: You should be able to access it like this: export default { actions: { foo (store, payload) { let client = this.app.apolloProvider

Multidimensional Arrays, Vuex & Mutations

由 人走茶凉 提交于 2021-02-10 13:23:37
问题 I'm attempting to both add and remove items in a multidimensional array stored in Vuex. The array is a group of categories, and each category and have a sub-category (infinity, not simply a two dimensional array). Example data set is something like this: [ { id: 123, name: 'technology', parent_id: null, children: [ id: 456, name: 'languages', parent_id: 123, children: [ { id:789, name: 'javascript', parent_id: 456 }, { id:987, name: 'php', parent_id: 456 } ] }, { id: 333, name: 'frameworks',

Multidimensional Arrays, Vuex & Mutations

由 风格不统一 提交于 2021-02-10 13:23:11
问题 I'm attempting to both add and remove items in a multidimensional array stored in Vuex. The array is a group of categories, and each category and have a sub-category (infinity, not simply a two dimensional array). Example data set is something like this: [ { id: 123, name: 'technology', parent_id: null, children: [ id: 456, name: 'languages', parent_id: 123, children: [ { id:789, name: 'javascript', parent_id: 456 }, { id:987, name: 'php', parent_id: 456 } ] }, { id: 333, name: 'frameworks',

In vue.js, where can I place “app initialization” code?

由 て烟熏妆下的殇ゞ 提交于 2021-02-10 11:55:48
问题 Specifically, code that runs before the app actually loads. I'm using vuex and the first thing I want to do (regardless of what route the user is on) is to dispatch a getUser action to get currently user details from the API (or alternatively, redirect if not authenticated). If I place it in my App.vue mounted component, I believe it might be too late? Don't children components load before parents? 回答1: If I get it right you want to do something before the application initialize. For that you

In vue.js, where can I place “app initialization” code?

由 為{幸葍}努か 提交于 2021-02-10 11:52:35
问题 Specifically, code that runs before the app actually loads. I'm using vuex and the first thing I want to do (regardless of what route the user is on) is to dispatch a getUser action to get currently user details from the API (or alternatively, redirect if not authenticated). If I place it in my App.vue mounted component, I believe it might be too late? Don't children components load before parents? 回答1: If I get it right you want to do something before the application initialize. For that you

vue基本知识点

由 家住魔仙堡 提交于 2021-02-10 04:30:01
Vue 尤雨溪 渐进式的JAVAscript框架 MVVM框架 M：model层 数据的增删改查 V：view层 视图 类似与HTML一样的模板 VM:viewModel model和view的一个映射层 优点： 数据驱动视图 回流和重绘 简单的来说页面的排版布局发生了改变就是回流 简单来说对一个元素进行样式操作不会导致页面布局发生改变重绘 回流一定会发生重绘 重绘不一定发生回流 vue常用的指令 v-text {{}} v-html v-bind : v-on @ .stop .prev .enter .keyCode值 $event v-model form表单 .number Object.defineProperty Proxy v-for v-show v-if 区别： 前者操作元素的display属性 初次渲染的开销较大 后者操作元素的创建和销毁 开销较大 使用场景： v-else-if v-else v-pre v-cloak v-once v-slot 插槽 自定义指令 全局注册 Vue.directive() 局部注册 VUE({ }) 过滤器 Vue.filter() 组件 Vue.component() watch 属性监听 基于Vue的依赖，当依赖的属性发生了改变的时候，那么就会自动触发相对应的方法进行数据的处理

vite2 vue3-ts 添加router, vuex和alias

由 旧街凉风 提交于 2021-02-08 23:36:34
原文链接: vite2 vue3-ts 添加router, vuex和alias 安装 yarn add vue-router@4 yarn add vuex@next https://next.vuex.vuejs.org/installation.html https://github.com/vuejs/vue-router-next https://next.router.vuejs.org/ https://next.vuex.vuejs.org/installation.html vuex store import { createStore } from "vuex"; const defaultState = { count: 0, }; const store = createStore({ state() { return defaultState; }, mutations: { increment(state: typeof defaultState) { state.count++; }, }, getters: { double(state: typeof defaultState) { return 2 * state.count; }, }, }); export default store; app.vue <template> <el
订阅 vuex