V
V
Vladimir Golub2021-12-06 10:40:36
Vue.js
Vladimir Golub, 2021-12-06 10:40:36

How to create a plugin with its own state and pass props to it?

I want to create a plugin with my own state

import Vue from 'vue/dist/vue.js';
import Vuex from 'vuex';
import { mapState } from 'vuex';

Vue.use(Vuex);

const state = () => ({
  name: 'Jack'
})

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

const testComponent = Vue.component('TestComponent', {
  props: ['numb'],
  computed: {
    ...mapState({
      name: state => state.name
    })
  },
  template: '<p>{{ name }}{{ numb }}</p>'
});

new Vue({
  el: '#chart',
  store,
  render: h => h({
    template: `<div><TestComponent :numb="numb" /></div>`,
    components: {
      TestComponent: testComponent
    },
    props: {
      numb: {
        type: String,
        default: ''
      }
    },
    mounted() {
      console.log(this.numb);
    }
  })
})

Yes, it looks like creating an application within an application, but so far I have not found another solution to the problem.
How to pass props to it?
<div id="chart" :numb="111" />

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question