代码之家 › 专栏 › 技术社区 › dendog

动态填充Vuex状态

vuex vuejs2 vue.js javascript

dendog · 技术社区 · 7 年前

我需要根据 data 根组件中的变量。

应用程序。vue:

export default {
  store : store,
  name: 'app',
  data() {
    clientId : 1  
  }
}

百货商店js:

export const store = new Vuex.Store({
  state : {
    clientConfig : clientConfig
});

以及 clientConfig 将存储在单独的文件中。

基于对初始Vuejs应用程序的一些输入,实现Vuex状态的动态/编程加载的最佳方法是什么?

谢谢

1 回复 | 直到 7 年前

ittus 7 年前

以下是1种可能的解决方案:

export const store = new Vuex.Store({
  state : {
    clientConfigs :{
      "1": clientConfig1,
      "2": clientConfig2
    },
    clientId: "1"
  },
  getters: {
    currentClientConfig: state => {
      return state.clientConfigs[state.clientId]
    }
  },
  mutations: {
   setClientId (state, newValue) {
     state.clientId = newValue
   }
  }
});

在您的组件中,您可以通过以下方式访问配置 this.$store.getters.currentClientConfig

要更新 clientId ,可以使用突变。在组件中,可以使用 this.$store.commit('setClientId', yourNewClientId)

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

3 年前

Park · Vuejs道具,路径较长

3 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

3 年前

roev · 大堆来自(物体)。forEach不使用vue。js

3 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

7 年前

Ready Dev · Axios一次发出多个请求(vue.js)

7 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

7 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

7 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

7 年前

Tim · VueJS-迭代从AJAX调用返回的数据

7 年前