antv.2.0 使用vue创建的自定义节点 节点组件中如何获取vuex里面的值

Question

问题：antv 2.0 vue2.0创建的自定义节点中 获取不到vuex的值，其他页面组件都能正常获取
图片：

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7570237
• 这篇博客也不错, 你可以看下vue antv f2使用实例
• 除此之外, 这篇博客: vue使用antv踩到的坑中的 面积图的纵坐标问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  1.使用antv g2plot 的面积图，纵坐标总是不对，之前以为是自己写的有问题， 结果发现是它这个框架的面积图的框架都有问题（纵坐标是两个面积图的纵坐标之和）

• 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇课程中的 Vuex模块化管理改进——Vuex标准项目结构小节, 巩固相关知识点
  
• 以下回答来自chatgpt:

  首先，确保你已经正确安装了 Vue 和 Vuex，并且在你的项目中正确引入了这两个库。接下来，我们需要做以下几个步骤来实现在自定义节点组件中访问 Vuex 中的值：

  1. 在你的 Vuex store 文件中定义你需要访问的值。例如，在 store.js 中，你可以定义一个名为 nodeValue 的 state：

  import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      nodeValue: 'hello world',
    },
    mutations: {
      updateNodeValue(state, value) {
        state.nodeValue = value;
      },
    },
    actions: {
      updateNodeValue(context, value) {
        context.commit('updateNodeValue', value);
      },
    },
  });
  

  1. 在你的自定义节点组件文件中，使用 mapState 辅助函数来映射 Vuex state 到组件的计算属性中。例如，在 Node.vue 文件中，你可以添加下面的代码：

  <template>
    <div>
      <p>{{ nodeValue }}</p>
      <button @click="updateValue">Update Node Value</button>
    </div>
  </template>
  
  <script>
  import { mapState } from 'vuex';
  
  export default {
    computed: {
      ...mapState(['nodeValue']),
    },
    methods: {
      updateValue() {
        // 在这里通过调用 action 更新 Vuex 中的值
        this.$store.dispatch('updateNodeValue', 'new value');
      },
    },
  };
  </script>
  

  1. 在其他页面组件中使用该自定义节点组件，并确保你已经正确引入和注册了 Vuex store，以及正确使用了自定义节点组件。例如，在 App.vue 中，你可以添加下面的代码：

  <template>
    <div id="app">
      <p>{{ nodeValue }}</p>
      <CustomNode></CustomNode>
    </div>
  </template>
  
  <script>
  import CustomNode from './components/Node.vue';
  import store from './store';
  
  export default {
    components: {
      CustomNode,
    },
    computed: {
      ...mapState(['nodeValue']),
    },
    store,
  };
  </script>
  

  以上是解决该问题的一般步骤和代码示例，你可以根据你的具体项目结构和需求进行调整和适配。如果以上步骤不适用于你的情况，请提供更多的详细信息让我更好地理解你的项目和问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^