vuex

vue-cli store my code like this: ...mapActions('some/nested/module',[ 'getCountry', 'getCurrency' ]), How to set up mapActions path in the Vue component? mapActions is used in a component's methods property. // my-component.vue import { mapActions } from 'vuex' export default { ... methods: { ...mapActions('namespaced/module', [ 'myAction', 'myOtherAction' ]) } } The namespace can determined by the module's filename. For example, given a file - moduleA.js - getters, mutations, actions would be namespaced as moduleA/someGetter , moduleA/someAction , moduleA/someMutation . ...mapActions('moduleA

I get this error when trying to load a store module with the vuex-module-decorators into the initialiser: vuex.esm.js?2f62:261 Uncaught TypeError: Cannot read property 'getters' of undefined at eval (vuex.esm.js?2f62:261) at Array.forEach () at assertRawModule (vuex.esm.js?2f62:260) at ModuleCollection.register (vuex.esm.js?2f62:186) at eval (vuex.esm.js?2f62:200) at eval (vuex.esm.js?2f62:75) at Array.forEach () at forEachValue (vuex.esm.js?2f62:75) at ModuleCollection.register (vuex.esm.js?2f62:199) at new ModuleCollection (vuex.esm.js?2f62:160) The index.ts file is quite simple and all

I would like to auto-sign-in user when the page has been refreshed. I've read that I should use vuex-persistedstate to persist the token in localstorage . Here's my vuex store: store: { user: null }, actions: { autoSignIn ({commit}, payload) { commit('setUser', { id: payload.token }) } }, mutations: { setUser (state, payload) { state.user = payload; } }, plugins: [ createPersistedState({ getState: (key) => localStorage.getItem(key), setState: (key, state) => localStorage.setItem('user_token', key) }) ] I also have signIn action where I create a newUser with token . signUserIn ({commit, getters

I am struggling with finding answer for where to ideally put API calls in vue modules. I am not building an SPA. For example my auth block has several components for login, password reset, account verifiction etc. Each block uses axios for API calls. Axios already provides promises, which are async. The question is about the best pracitces. Do API calls belong in a Vuex actions? Are there any pros/cons of such approach? Is there any drawback of keeping axios calls within the components they belong to? I do API calls in services, not Vuex or components. Basically, mixing the API calls in with

In the documentation, it is written that the state is immutable apart from the mutations called via the actions ... Ok. I use in my component, mapGetters, mapActions ... store : export default { namespaced: true, state: { color: "violet" }, mutations: { changeColor(state, newColor) { state.color = newColor }, }, actions: { changeColor({ commit }, newColor) { commit('changeColor', newColor) } } component : ... methods: { ...mapActions({ setColor: 'store/changeColor', }), myMethodCallByButton(){ this.setColor("blue").then(response => { console.log("change Color done") },err => { console.log(

方式一、使用localStorage在数据存储 1、要在浏览器刷新的时候重新存储起来 if (window.localStorage.getItem(authToken)) { store.commit(types.SETLOANNUMBER, window.localStorage.getItem('loanNumber')); } 方式二、使用vue-cookie插件来做存储 1、参考地址 传送门 2、安装包 npm install vue-cookie --save 3、在store中存储起来 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex) var VueCookie = require('vue-cookie'); export default new Vuex.Store({ state: { token: VueCookie.get('token') }, mutations: { saveToken(state, token) { state.token = token; // 设置存储 VueCookie.set('token', token, { expires: '30s' }); } }, actions: { } }) 4、在登录页面中设置到存储中 import {

store的结构： city模块： 在各模块使用了命名空间的情况下，即 namespaced: true 时： 组件中访问模块里的state 传统方法： this.$store.state['模块名']['属性名'] 例如：this.$store.state.city.list。 控制台输出 this.$store.state mapState方法： import { mapState } from 'vuex' computed: { // ... ...mapState({ list: state => state.city.list }) } 组件中dispatch模块里的actions 传统方法： // @params:opts Object or String this.$store.dispatch('模块名/属性名', opts) 组件中使用如：this.$store.dispatch('city/add', '上海') mapActions方法： 引入： import { mapActions } from 'vuex' methods中的属性名可以更改成其他任意名字，但是属性值需要和模块名，actions属性名对应。 在组件中访问模块里的getter 传统方法： this.$store.getters['模块名/属性名'] 如：this.$store

Good day. We are building our application using Vuejs/Vuex/vue-router using the https://github.com/vuejs/vue-hackernews-2.0 When building and viewing our application using IE11 we get a SCRIPT1046: Multiple definitions of a property not allowed in strict mode and it references the compiled app.[#hash].js file. I have tracked the duplicate property to the following in the component: <div class="form-group form-group-list"> <label aria-labelledby="Shopping preference">Shopping preference</label> <ul class="inline"> <li> <label for="users__secondary_signup__gender__female" aria-labelledby="Gender