标签: vuex-modules

我只需要使用vuex-persistedstate我的一个模块来通过刷新页面来保持状态。

现在，当我plugins: [createPersistedState()]只在user模块内部使用时它不起作用。

plugins: [createPersistedState()]仅当我在商店内使用它时才有效，index.js但它会使所有模块持久化，这不是我想要的。

请问，有没有一种方法可以配置vuex-persistedstate为仅使用一个模块？

index.js

//import createPersistedState from 'vuex-persistedstate'
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import workout from './modules/workout'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  getters: {

  },
  mutations: {

  },
  actions: {

  },
  modules: {
    user,
    workout
  },
  //This makes all store modules persist through page refresh
  //plugins: [createPersistedState()]
})

user.js

import { USER } from '../mutation-types'
import …

我想将Vuex突变设置如下:

export default {
    props: {
        store: String
    },
    methods: {
        ...mapMutations({
            changeModel: `${this.store}/changeModel`
        })
    }
}

但我抓住了这个错误:

未捕获的TypeError:无法读取未定义的属性"store"

如何在模块变异名称中正确使用道具？

我想要映射this.$store.commit('form1/changeModel'),form1从道具设置的地方.

NuxtServerInit 不适用于 nuxt js vuex 模块模式下的初始页面渲染。但它适用于经典模式。以下代码是我使用的流程。

我的api调用

api/CategoryApi.js

import axios from 'axios';

const HEADERS = {
    Accept: 'application/json'
};

export default {
    getCategory(payload) {
        return axios.get(`${process.env.apiUrl}/category`, {
            payload,
            headers: HEADERS
        });
    }
}

商店/模块/CategoryStore.js

import api from '~/api/CategoryApi'

const state = () => ({
    categories: []
});

const getters = {
    allCategories: state => state.categories
};

const actions = {
    async nuxtServerInit({commit}) {
        const payload = {
            per_page: 6,
            page: 1
        };
        const response = await api.getCategory(payload);
        commit('setCategories', response.data.data);
    }, …

我的应用程序中有多个带有 nameSpaced: true 的 vuex 模块。在模块的动作或变化中，我想知道父模块的名称。

说我有 2 个模块，'a' 和 'b'，我称之为突变

this.$store.commit("a/setName", name);
this.$store.commit("b/setName", name);

现在在 setName 函数中，我想知道调用的 nameSpace 是什么？是 'a' 还是 'b' ？

我按照本教程使用TypeScript设置了包含模块的Vuex存储.

到目前为止,我有:

vuex/types.ts:

export interface RootState {
    version: string;
}

vuex/user-profile.ts:

import { ActionTree, Module, MutationTree } from 'vuex';
import { RootState } from './types';

interface User {
    firstName: string;
    uid: string;
}

interface ProfileState {
    user?: User;
    authed: boolean;
}

const state: ProfileState = {
    user: undefined,
    authed: false,
};

const namespaced: boolean = true;

export const UserProfile: Module<ProfileState, RootState> = {
    namespaced,
    state,
};

store.ts:

import Vue from 'vue';
import Vuex, { StoreOptions …

我正在尝试消除动作中的任何内容，它以一种或另一种方式被吞没......

拿这个（伪）代码：

import { debounce } from "lodash";

const actions = {
  debounceSomeLogging ({ dispatch }, text) {
    console.log("Outside debounced function.");
    debounce(function() {
      console.log("Inside debounced function.");
      dispatch("doRealThing");
    }, 1000);
  },

  doRealThing({ commit }) {
    // Whatever
  }
}

当我调用该操作时，我看到了Outside debounced function，但我看不到其他日志记录并且其他操作没有被触发。

任何人都有这方面的经验，可以指出我正确的方向吗？

Vuex模块可以监视其他模块的状态,并因此触发操作吗？

例如,让我们考虑以下情况:

store.js

import time from './store/time' ;
import position from './store/position' ;

const store = new Vuex.Store
(
    {
        modules:
        {
            time,
            position
        }    
    }
) ;

store/time.js

export default
{

    namespaced: true,

    state:
    {
        time: new Date()
    },

    getters:
    {
        time: (aState) => aState.time
    },

    mutations:
    {

        setTime (aState, aTime)
        {
            aState.time = aTime ;
        }

    }

} ;

store/position.js

export default
{

    namespaced: true,

    state:
    {
        positions: {}
    },

    getters:
    {
        positions: aState => aState.positions
    },

    mutations: …

如果我有一个命名空间的 Vuex 模块，在 Vue 组件中使用这些状态时，如何为该模块中的状态创建 getter 和 setter？

// My component
new Vue({

 computed: {

   // How do I add setters also below????

   ...mapState('nameSpacedModA', {
       a : state => state.a,
       // ...
   },


   // Following will only add getters..
   // How to add setter ??? 

   ...mapGetters('nameSpacedModA', {
         a: 'a', 
         b: 'b' //, ...
    }
}

我使用 v-model 将“a”绑定到表单上的文本输入，然后当我编辑控件值时，Vue 给出错误：

[Vue 警告]：计算属性“a”已分配给但没有设置器。

如何解决这个问题？

在几乎所有关于 vuex 模块注册的指南、教程、帖子等中，如果模块由组件注册，则createNamespacedHelpers在export default组件语句之前导入和定义，例如：

import {createNamespacedHelpers} from 'vuex'
const {mapState} = createNamespacedHelpers('mymod')

import module from '@/store/modules/mymod'

export default {
  beforeCreated() {
    this.$store.registerModule('mymod', module)
  }
}

这按预期工作，但是如果我们希望模块具有唯一的或用户定义的命名空间怎么办？

import {createNamespacedHelpers} from 'vuex'
import module from '@/store/modules/mymod'

export default {
  props: { namespace: 'mymod' },
  beforeCreated() {
    const ns = this.$options.propData.namespace
    this.$store.registerModule(ns, module)
    const {mapState} = createNamespacedHelpers(ns)
    this.$options.computed = {
      ...mapState(['testVar'])
    }
  }
}

我认为这会起作用，但它没有。

为什么需要这样的东西？因为

export default {
  ...
  computed: {
    ...mapState(this.namespace, ['testVar']), 
    ...
  },
  ...
}

不起作用

我想清空警报状态，以便不显示警报，我真的不知道如何在 addMovieToFavourites 或 removeMovieToFavourites 执行后 x 秒触发 removeAlert 操作，代码如下，谢谢。

警报.js

const state = {
  alert: null
}
const mutations = {
  SET_ALERT(state, alert) {
    state.alert = alert
  },

  REMOVE_ALERT(state) {
    state.alert = null
  }
}
const actions = {
  setAlert({ commit }, alert) {
    commit('SET_ALERT', alert)
  },
  removeAlert({ commit }) {
    commit('REMOVE_ALERT')
  }
}

media.js 添加/删除触发警报消息

const actions = {
  addMovieToFavourites({ commit, dispatch }, movie) {
    commit('ADD_FAVOURITE', movie)
    const alert = {
      type: 'success',
      message: 'Added to favourites!'
    }
    dispatch('alert/setAlert', …