vuex#MutationTree TypeScript Examples

mutations: MutationTree<CompareState> = {
  /**
   * Add product to Compare
   * @param {Object} product data format for products is described in /doc/ElasticSearch data formats.md
   */
  [types.COMPARE_ADD_ITEM] (state, { product }) {
    const record = state.items.find(p => p.sku === product.sku)
    if (!record) {
      state.items.push(product)
    }
  },
  [types.COMPARE_DEL_ITEM] (state, { product }) {
    state.items = state.items.filter(p => p.sku !== product.sku)
  },
  [types.COMPARE_LOAD_COMPARE] (state, storedItems) {
    state.items = storedItems || []
  },
  [types.SET_COMPARE_LOADED] (state, isLoaded: boolean = true) {
    state.loaded = isLoaded
  }
}

mutations: MutationTree<NatureState> = {
  [NatureMutationTypes.RESET_STATE](state: NatureState) {
    Object.assign(state, defaultState())
  },

  // nature
  [NatureMutationTypes.SET_SHOW_SUN](state: NatureState, payload: boolean) {
    state.showSun = payload
  },

  [NatureMutationTypes.SET_SHOW_MOON](state: NatureState, payload: boolean) {
    state.showMoon = payload
  },

  [NatureMutationTypes.SET_SHOW_SKY_ATMOSPHERE](
    state: NatureState,
    payload: boolean
  ) {
    state.showSkyAtmosphere = payload
  },

  [NatureMutationTypes.SET_ENABLE_LIGHT](state: NatureState, payload: boolean) {
    state.enableLighting = payload
  },

  [NatureMutationTypes.SET_SHOW_SKY_BOX](state: NatureState, payload: boolean) {
    state.showSkyBox = payload
  },

  [NatureMutationTypes.SET_SHOW_SHADOW](state: NatureState, payload: boolean) {
    state.showShadow = payload
  },
}

mutations: MutationTree<OtherState> = {
  [OtherMutationTypes.RESET_STATE](state: OtherState) {
    Object.assign(state, defaultState())
  },

  // other
  [OtherMutationTypes.SET_DEPTH_TEST_AGAINST_TERRAIN](
    state: OtherState,
    payload: boolean
  ) {
    state.depthTestAgainstTerrain = payload
  },
}

mutations: MutationTree<Tool3DTileState> = {
  [Tool3DTileMutationTypes.RESET_STATE](state: Tool3DTileState) {
    Object.assign(state, defaultState())
  },

  // tool3dtile
  [Tool3DTileMutationTypes.SET_HIGHLIGHT_3DTILE_FEATURE_ACTIVE](
    state: Tool3DTileState,
    payload: boolean
  ) {
    state.highlight3DTileFeatureActive = payload
  },

  [Tool3DTileMutationTypes.SET_HOVER_CLASSIFICATION_ACTIVE](
    state: Tool3DTileState,
    payload: boolean
  ) {
    state.hoverClassificationActive = payload
  },

  [Tool3DTileMutationTypes.SET_CLICK_CLASSIFICATION_ACTIVE](
    state: Tool3DTileState,
    payload: boolean
  ) {
    state.clickClassificationActive = payload
  },
}

mutations: MutationTree<InfluenceState> = {
    addUser (state, user) {
        state.users.push(user);
    },

    resetRoot (state) {
        state.root = null;
    },

    setRoot (state, root) {
        state.root = root;
    },
}

mutations: MutationTree<AttributeState> = {
  /**
   * Store attributes by code in state and localForage
   * @param {} state
   * @param {Array} attributes
   */
  async [types.ATTRIBUTE_UPD_ATTRIBUTES] (state, { attrHashByCode, attrHashById }) {
    Vue.set(state, 'list_by_code', attrHashByCode)
    Vue.set(state, 'list_by_id', attrHashById)
    EventBus.$emit('product-after-attributes-loaded')
  },
  [types.ATTRIBUTE_UPD_BLACKLIST] (state, blacklist) {
    state.blacklist = state.blacklist.concat(blacklist)
  }
}

mutations: MutationTree<StockState> = {
  [types.SET_STOCK_CACHE] (state, cache) {
    state.cache = cache
  },
  [types.SET_STOCK_CACHE_PRODUCT] (state, { productId, productInfo }) {
    state.cache = Object.assign({}, state.cache, {
      [productId]: productInfo
    })
  }
}

mutations: MutationTree<CmsBlockState> = {
  [types.CMS_BLOCK_UPDATE_CMS_BLOCKS] (state, cmsBlocks) {
    state.items = cmsBlocks || []
  },
  [types.CMS_BLOCK_ADD_CMS_BLOCK] (state, cmsBlock) {
    const record = state.items.find(c => c.id === cmsBlock.id)
    if (!record) {
      state.items.push(cmsBlock)
    }
  }
}

mutations: MutationTree<CmsPageState> = {
  [types.CMS_PAGE_UPDATE_CMS_PAGES] (state, cmsPages) {
    state.items = cmsPages || []
  },
  [types.CMS_PAGE_SET_CURRENT] (state, current) {
    state.current = current
  },
  [types.CMS_PAGE_ADD_CMS_PAGE] (state, cmsPage) {
    const record = state.items.find(c => c.id === cmsPage.id)
    if (!record) {
      state.items.push(cmsPage)
    }
  }
}

mutations: MutationTree<State> = {
  [ToolbarMutationTypes.RESET_STATE](state: State) {
    Object.assign(state, defaultState())
  },

  [ToolbarMutationTypes.SET_VISIBLE](state: State, payload: boolean) {
    state.visible = payload
  },

  [ToolbarMutationTypes.SET_DROP_DOWN](state: State, payload: DropdownState) {
    state.dropdown = payload
  },

  [ToolbarMutationTypes.SET_DROP_DOWN](state: State, payload: DropdownState) {
    state.dropdown = payload
  },

  // elevation contour
  [ToolbarMutationTypes.SET_ELEVATION_CONTURE_ACTIVE](
    state: State,
    payload: boolean
  ) {
    state.elevationContourActive = payload
  },

  // terrain sampling
  [ToolbarMutationTypes.SET_TERRAIN_SAMPLING](
    state: State,
    payload: TerrainSamplingState
  ) {
    state.terrainSampling = payload
  },
}

mutations: MutationTree<OrderState> = {
  [types.ORDER_LAST_ORDER_WITH_CONFIRMATION] (state, payload) {
    state.last_order_confirmation = payload
  },
  [types.ORDER_ADD_SESSION_STAMPS] (state, order: Order) {
    const orderId = entities.uniqueEntityId(order) // timestamp as a order id is not the best we can do but it's enough
    order.order_id = orderId.toString()
    order.created_at = new Date().toString()
    order.updated_at = new Date().toString()
  },
  [types.ORDER_ADD_SESSION_ORDER_HASH] (state, hash: string) {
    state.session_order_hashes.push(hash)
  },
  [types.ORDER_REMOVE_SESSION_ORDER_HASH] (state, hash: string) {
    state.session_order_hashes = state.session_order_hashes.filter(sessionHash => sessionHash !== hash)
  }
}

mutations: MutationTree<RecentlyViewedState> = {
  /**
  * Add product to Recently Viewed Products
  * @param {Object} product data format for products is described in /doc/ElasticSearch data formats.md
  */
  [types.RECENTLY_VIEWED_ADD_ITEM] (state, { product }) {
    const record = state.items.find(p => p.sku === product.sku)
    if (!record) {
      state.items.unshift(product)
    }
  },
  [types.RECENTLY_VIEWED_LOAD] (state, storedItems) {
    state.items = storedItems || []
  }
}

mutations: MutationTree<any> = {
  [types.SET_CURRENT_ROUTE] (state, payload = {}) {
    state.currentRoute = omit({ ...payload }, ['matched'])
  },
  [types.SET_PREV_ROUTE] (state, payload = {}) {
    state.prevRoute = omit({ ...payload }, ['matched'])
  },
  [types.IS_BACK_ROUTE] (state, payload) {
    state.isBackRoute = payload
  }
}

mutations: MutationTree<UserState> = {
  [types.USER_TOKEN_CHANGED] (state, payload) {
    state.token = payload.newToken
    if (payload.meta && payload.meta.refreshToken) {
      state.refreshToken = payload.meta.refreshToken // store the refresh token
      Logger.log('Refresh token is set to' + state.refreshToken, 'user')()
    }
  },
  [types.USER_START_SESSION] (state) {
    state.session_started = new Date()
  },
  [types.USER_GROUP_TOKEN_CHANGED] (state, token) {
    state.groupToken = token
  },
  [types.USER_GROUP_CHANGED] (state, groupId) {
    state.groupId = groupId
  },
  [types.USER_INFO_LOADED] (state, currentUser) {
    state.current = currentUser
  },
  [types.USER_ORDERS_HISTORY_LOADED] (state, ordersHistory) {
    state.orders_history = ordersHistory
  },
  [types.USER_END_SESSION] (state) {
    state.token = ''
    state.current = null
    state.session_started = null
  },
  [types.USER_LOCAL_DATA_LOADED] (state, readed = false) {
    state.local_data_loaded = readed
  }
}

mutations: MutationTree<WishlistState> = {
  [types.WISH_ADD_ITEM] (state, { product }) {
    const record = state.items.find(p => p.sku === product.sku)
    if (!record) {
      state.items.push({
        ...product,
        qty: 1
      })
    }
  },
  [types.WISH_DEL_ITEM] (state, { product }) {
    state.items = state.items.filter(p => p.sku !== product.sku)
  },
  [types.WISH_LOAD_WISH] (state, storedItems = []) {
    state.items = storedItems || []
  },
  [types.WISH_DEL_ALL_ITEMS] (state) {
    state.items = []
  },
  [types.SET_WISHLIST_LOADED] (state, isLoaded: boolean = true) {
    state.loaded = isLoaded
  }
}

mutations: MutationTree<RootState> = {
  [types.USER_TOKEN_INVALIDATE_LOCK_CHANGED] (state, payload) {
    state.userTokenInvalidateLock = payload
  },
  [types.RESET_USER_TOKEN_INVALIDATION] (state) {
    state.userTokenInvalidateLock = 0
    state.userTokenInvalidated = null
    state.userTokenInvalidateAttemptsCount = 0
  }

}

mutations: MutationTree<State> & Mutations = {
  [MutationTypes.SET_OVERVIEW](state, payload: Overview) {
    state.overview = payload;
  },
  [MutationTypes.SET_PROJECT](state, payload: Record<any, any>) {
    state.projects = payload;
  },
  [MutationTypes.SET_TEAM](state, payload: Record<any, any>) {
    state.teams = payload;
  },
  [MutationTypes.SET_MOVEMENT](state, payload: Record<any, any>) {
    state.movements = payload;
  },
  [MutationTypes.SET_RADAR](state, payload: Record<any, any>) {
    state.radarData = payload;
  },
}

mutations: MutationTree<State> & Mutations = {
  [MutationTypes.SET_USERINFO](state, payload: UserInfo) {
    state.userInfo = payload;
  },
  [MutationTypes.SET_NOTIFICATION](state, payload: Notification[]) {
    state.notifications = payload;
  },
  [MutationTypes.SET_MENU](state, payload: Menu[]) {
    state.menu = payload;
  },
  [MutationTypes.SET_USER_MENU](state, payload: Menu[]) {
    state.userMenu = payload;
  },
}

mutations: MutationTree<ImageryState> = {
  [ImageryMutationTypes.RESET_STATE](state: ImageryState) {
    Object.assign(state, defaultState())
  },

  // imagery
  [ImageryMutationTypes.SET_SPLIT](state: ImageryState, payload: SplitType) {
    state.split = payload
  },
}

mutations: MutationTree<DrawState> = {
  [DrawMutationTypes.RESET_STATE](state: DrawState) {
    Object.assign(state, defaultState())
  },

  // draw
  [DrawMutationTypes.SET_DRAW_POINT_ACTIVE](
    state: DrawState,
    payload: boolean
  ) {
    state.drawPointActive = payload
  },

  [DrawMutationTypes.SET_DRAW_POLYLINE_ACTIVE](
    state: DrawState,
    payload: boolean
  ) {
    state.drawPolylineActive = payload
  },

  [DrawMutationTypes.SET_DRAW_POLYGON_ACTIVE](
    state: DrawState,
    payload: boolean
  ) {
    state.drawPolygonActive = payload
  },
}

mutations: MutationTree<State> = {
  [LocationBarMutationTypes.RESET_STATE](state: State) {
    Object.assign(state, defaultState())
  },

  [LocationBarMutationTypes.SET_SHOW_CAMERA_LOCATION](
    state: State,
    payload: boolean
  ) {
    state.showCameraLocation = payload
  },

  [LocationBarMutationTypes.SET_SHOW_MOUSE_LOCATION](
    state: State,
    payload: boolean
  ) {
    state.showMouseLocation = payload
  },

  [LocationBarMutationTypes.SET_SHOW_FPS](state: State, payload: boolean) {
    state.showFPS = payload
  },
}

mutations: MutationTree<MeasureState> = {
  [MeasureMutationTypes.RESET_STATE](state: MeasureState) {
    Object.assign(state, defaultState())
  },

  // measure
  [MeasureMutationTypes.SET_MEASURE_POINT_ACTIVE](
    state: MeasureState,
    payload: boolean
  ) {
    state.measurePointActive = payload
  },

  [MeasureMutationTypes.SET_MEASURE_POLYLINE_ACTIVE](
    state: MeasureState,
    payload: boolean
  ) {
    state.measurePolylineActive = payload
  },

  [MeasureMutationTypes.SET_MEASURE_POLYGON_ACTIVE](
    state: MeasureState,
    payload: boolean
  ) {
    state.measurePolygonActive = payload
  },
}

mutations: MutationTree<StaffState> = {
    setMca (state, mca) {
        state.mca = mca;
    },
    setCategories (state, categories) {
        state.categories = categories || [];
    },
    setRequests (state, requests) {
        state.requests = requests || [];
    },
    updateRequest (state, payload: UpdateRequestData) {
        const i = state.requests.findIndex(r => r.ID === payload.id);
        if (i !== -1) state.requests[i].status = payload.status;
    },
}

mutations: MutationTree<ICartState> & CartMutationsType = {
  [CartMutationEnums.ADD_ITEM_TO_CART](state: ICartState, product: Product) {
    if (state.items[product.id]) {
      state.items[product.id].quantity += 1
    } else {
      state.items[product.id] = {
        data: { ...product },
        quantity: 1,
      }
    }
  },
  [CartMutationEnums.REMOVE_ITEM_FROM_CART](
    state: ICartState,
    id: Product['id']
  ) {
    delete state.items[id]
  },
  [CartMutationEnums.DECREMENT_QUANTITY](state: ICartState, id: Product['id']) {
    if (state.items[id].quantity > 1) {
      state.items[id].quantity--
    }
  },
}

mutations: MutationTree<CartState> & CartMutations = {
  [CartMutationsEnums.ADD_ITEM_TO_CART]: (
    state: CartState,
    payload: Product
  ) => {
    if (state.items[payload.id]) {
      state.items[payload.id].quantity += 1
    } else {
      state.items[payload.id] = { quantity: 1, data: { ...payload } }
    }
  },
}

mutations: MutationTree<JTPrimitiveState> = {
  [JTPrimitiveMutationTypes.RESET_STATE](state: JTPrimitiveState) {
    Object.assign(state, defaultState())
  },

  // primitive
  [JTPrimitiveMutationTypes.SYNC_JTPRIMITIVES](
    state: JTPrimitiveState,
    payload: JTPrimitive[]
  ) {
    state.jtPrimitives.splice(0, state.jtPrimitives.length)
    state.jtPrimitives.push(...payload)
  },
}

mutations: MutationTree<StaffState> = {
    setMca (state, mca) {
        state.mca = mca;
    },
}

mutations: MutationTree<RootState> = {
    setLoggedInUser (state, user) {
        state.loggedInUser = user;
    },
    setMCA (state, mca: MCA) {
        if (mca.year)
            state.mca = {
                year: mca.year,
                nomination: {
                    start: new Date(mca.nomination.start),
                    end: new Date(mca.nomination.end),
                },
                voting: {
                    start: new Date(mca.voting.start),
                    end: new Date(mca.voting.end),
                },
                results: new Date(mca.results),
            };
        else
            state.mca = null;
    },

    setAllMCA (state, mcas: MCAInfo[]) {
        state.allMCA = mcas;
    },

    setSelectedMode (state) {
        const localMode = localStorage.getItem("mode");

        if (localMode && modeRegex.test(localMode)) {
            state.selectedMode = localMode;
        }
    },
    updateSelectedMode (state, mode) {
        if (modeRegex.test(mode)) {
            state.selectedMode = mode;
            localStorage.setItem("mode", mode);
        }
    },

    addGuestRequest (state, request: GuestRequest) {
        if (!request || !state.loggedInUser) return;

        state.loggedInUser.guestRequests.push(request);
    },
    updateGuestRequest (state, request: GuestRequest) {
        if (!request || !state.loggedInUser) return;

        const i = state.loggedInUser.guestRequests.findIndex(r => r.ID === request.ID);
        if (i !== -1) Vue.set(state.loggedInUser.guestRequests, i, request);
    },
    toggleGuestDifficultyModal (state) {
        state.showGuestDifficultyModal = !state.showGuestDifficultyModal;
    },
}

mutations: MutationTree<RootState> = {
    setLoggedInUser (state, user) {
        state.loggedInUser = user;
    },
}