本文介绍了外部更改数据时vue组件不更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的组件在 Store.loaded 更改时不会更新加载的属性:

组件

从 'vue-property-decorator' 导入 { Vue }从nuxt-class-component"导入组件从 '../repositories' 导入 { Store }@零件导出默认类布局扩展 Vue {已加载 = Store.loaded}

商店

类根{加载=假}导出让 Store = new Root()导出默认商店
解决方案

在您的示例中,Store 只是普通函数(类),没有任何反应性(没有为 Store.加载字段).

只有组件的 data 中的属性是响应式的.如果你想要 vue 组件之外的响应式单一存储(更适合大型前端应用程序),你应该使用 Vuex

简单的例子是:

App.vue:

从'vuex'导入{mapGetters,mapMutations};从'./store'导入商店;从'./components/ChildComponent.vue'导入ChildComponent;导出默认{店铺,组件:{ ChildComponent },方法: {...mapMutations(['toggleLoaded']),},计算:{...mapGetters({isLoaded: 'isLoaded',}),}}</脚本><模板><div id="app"><a href="javascript:" @click="toggleLoaded">切换加载</a><h3>根组件:</h3><div>加载的标志是:{{ isLoaded }}</div><子组件/></div></模板>

components/ChildComponent.vue:

从'vuex'导入{mapGetters};导出默认{计算:{...mapGetters({isLoaded: 'isLoaded',//以 root 身份通过单个 Vuex 状态访问相同的数据}),}}</脚本><模板><div 类="你好"><h3>子组件</h3><div>加载的标志是:{{ isLoaded }}</div></div></模板>

以及反应式 Vuex 商店:

存储/index.js:

从'vue'导入Vue;从'vuex'导入Vuex;Vue.use(Vuex);常量状态 = {加载:假};常量 getters = {isLoaded: 状态 =>state.loaded,};常量突变 = {toggleLoaded:(状态)=>{state.loaded = !state.loaded;}};导出默认新的 Vuex.Store({状态,突变,//动作,吸气剂,严格:真});

您可以在 在 GitHub 上找到此示例的完整源代码.p>

My component does not update the loaded property when Store.loaded changes:

Component

import { Vue } from 'vue-property-decorator'
import Component from 'nuxt-class-component'
import { Store } from '../repositories'

@Component
export default class Layout extends Vue {
    loaded = Store.loaded
}

Store

class Root {
    loaded = false
}

export let Store = new Root()
export default Store
解决方案

In your example Store is just plain function (class), without any reactivity (no Vue watchers attached for Store.loaded field).

Only properties inside component's data are reactive. If you want reactive single store outside of vue components (better for big frontend applications), you should use Vuex

Simple example will be:

App.vue:

<script>
import { mapGetters, mapMutations } from 'vuex';
import store from './store';
import ChildComponent from './components/ChildComponent.vue';

export default {
  store,
  components: { ChildComponent },

  methods: {
    ...mapMutations(['toggleLoaded']),
  },

  computed: {
    ...mapGetters({
      isLoaded: 'isLoaded',
    }),
  }
}

</script>

<template>
  <div id="app">
    <a href="javascript:" @click="toggleLoaded">Toggle loaded</a>

    <h3>Root component: </h3>
    <div>The loaded flag is: {{ isLoaded }}</div>

    <ChildComponent />
  </div>
</template>

components/ChildComponent.vue:

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters({
      isLoaded: 'isLoaded', //accessing to same data, as root through single Vuex state
    }),
  }
}
</script>

<template>
  <div class="hello">
    <h3>Child component</h3>
    <div>The loaded flag is: {{ isLoaded }}</div>
  </div>
</template>

And reactive Vuex store:

store/index.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
  loaded: false
};

const getters = {
  isLoaded: state => state.loaded,
};

const mutations = {
  toggleLoaded: (state) => {
    state.loaded = !state.loaded;
  }
};

export default new Vuex.Store({
  state,
  mutations,
  // actions,
  getters,
  strict: true
});

You can find full source of this example on GitHub.

这篇关于外部更改数据时vue组件不更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 06:23