vuex

Can I call commit from one of mutations in Vuex store

由 被刻印的时光 ゝ 提交于 2019-12-09 05:08:59
问题 I have a vuex store, like following: import spreeApi from '../../gateways/spree-api' // initial state const state = { products: [], categories: [] } // mutations const mutations = { SET_PRODUCTS: (state, response) => { state.products = response.data.products commit('SET_CATEGORIES') }, SET_CATEGORIES: (state) => { state.categories = state.products.map(function(product) { return product.category}) } } const actions = { FETCH_PRODUCTS: (state, filters) => { return spreeApi.get('products').then

What does { …obj1, obj2 } do exactly [duplicate]

由 三世轮回 提交于 2019-12-08 21:57:27
This question already has answers here : What do these three dots in React do? (22 answers) Closed 8 months ago . Let's say we have two objects: const state = { fishes: { /* some obj data */ }, animals: { /* some obj data */ } const animals = { /* some NEW data */ } In Vuex there is a method replaceState(), which according to the documentation takes one argument and replaces the state with that object. What will be the result of the following: replaceState({ ...state, animals }) More specifically, what does { ...state, animals } do exactly? To bring some context, I took this example from the

How to change Vuetify calendar date format

由 浪尽此生 提交于 2019-12-08 19:58:53
问题 I am attempting to enable inputted events on the following Vuetify calendar: https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/calendars/complex/events.vue. I have set up my calendar to accept inputted data submitted in a form, including name, details, start, end, color. When I submit the form, an error occurs saying that the start and end properties are required on all events to be a valid timestamp in the format YYYY-MM-DD. I am using type="date" in the start and

Vuex + Typescript

由 空扰寡人 提交于 2019-12-08 16:45:37
问题 I am converting a JavaScript project to TypeScript. However I am getting a type error when trying to make Vue use Vuex. import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); It looks like the problem is that vuex does not provide type definitions like vuejs does? Because I also have to set "allowSyntheticDefaultImports": true in my tsconfig.json. How can I solve this problem and make Vue.use accept Vuex as the correct type? 回答1: I wish I had an better answer, but I ended up deleting

How to use Vue Router from Vuex state?

由 旧城冷巷雨未停 提交于 2019-12-08 16:37:41
问题 In my components I've been using: this.$router.push({ name: 'home', params: { id: this.searchText }}); To change route. I've now moved a method into my Vuex actions, and of course this.$router no longer works. Nor does Vue.router . So, how do I call router methods from the Vuex state, please? 回答1: I'm assuming vuex-router-sync won't help here as you need the router instance. Therefore although this doesn't feel ideal you could set the instance as a global within webpack, i.e. global.router =

I have event duplication after action was moved in store object

由 六月ゝ 毕业季﹏ 提交于 2019-12-08 15:41:07
问题 In my laravel 5.8 / vue 2.5.17 / vuex^3.1.0 I have a problem that with dialog opened I have event duplication. I have an event for item deletion : In my vue file: ... mounted() { bus.$on('dialog_confirmed', (paramsArray) => { if (paramsArray.key == this.deleteFromUserListsKey(paramsArray.user_list_id)) { this.runDeleteFromUserLists(paramsArray.user_list_id, paramsArray.index); } }) bus.$on('onUserListDeleteSuccess', (response) => { this.is_page_updating = false this.showPopupMessage("User

Simulate v-if directive in custom directive

由 ぐ巨炮叔叔 提交于 2019-12-08 01:12:17
问题 I need to destroy element in custom directive like v-if. (Forbid item creation if the condition fails.) I trying this export const moduleDirective: DirectiveOptions | DirectiveFunction = (el, binding, vnode) => { const moduleStatus = store.getters[`permissions/${binding.value}Enabled`]; if (!moduleStatus) { const comment = document.createComment(' '); Object.defineProperty(comment, 'setAttribute', { value: () => undefined, }); vnode.elm = comment; vnode.text = ' '; vnode.isComment = true;

Vue.js disable component during ajax request

由 喜夏-厌秋 提交于 2019-12-07 17:56:45
问题 I'm looking for a simple solution for the following problem: I have a Vue component button with which I can make an ajax request. I would like to disable this button while the request is pending (to prevent multiple requests). 回答1: Sounds like you want your action to set (commit) a flag when it starts and then clear it when it ends. Try something like this in Vuex... state: { loading: false }, mutations: { isLoading (state) { state.loading = true }, doneLoading (state) { state.loading = false

axios新手实践实现登陆

由 荒凉一梦 提交于 2019-12-07 17:54:25
其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记 用到的：1、 vuex 2、axios 3、vue-route 登陆流程为：1、提交登陆表单，拿到后台返回的数据 2、将数据存入vuex 1、vuex配置 这里直接跳过安装之类的，百度一大堆，我直接上代码 // store index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 初始化时用sessionStore.getItem('token'),这样子刷新页面就无需重新登录 const state = { user: window.sessionStorage.getItem('user'), token: window.sessionStorage.getItem('token') } const mutations = { //将token保存到sessionStorage里，token表示登陆状态 SET_TOKEN: (state, data) => { state.token = data window.sessionStorage.setItem('token', data) }, //获取用户名 GET_USER: (state, data) => { // 把用户名存起来 state.user =

VueJS Memory Leak when Switching Routes

由 半城伤御伤魂 提交于 2019-12-07 03:58:55
问题 Whenever I switch routes, I have noticed that Vue components in my application are never destroyed and only created (the # Deleted column is always 0 as I toggle between routes). To be extra clear, the number of new components created is always equal to the number of components displayed on that route i.e. NONE of the Vue components are ever destroyed and every component on the route is recreated when a route is revisited. I've been researching to debug the problem and I know that the
订阅 vuex