[Documentation] Vuex in plugins

[rmfarrell]

@jon asked me to document how to use Vuex in Kiln plugins to incorporate into the docs...

---

Sometimes it may be a good idea to use Vuex in a Kiln plugin.

This is slightly tricky since you won't have direct access to the Vue object in the plugin context. The best way to get around this limitation is to dynamically register a store in a created hook on your root component. It is also necessary to namespace your store due to the module nature of Kiln plugins. For more info on Vuex modules see the docs

Example:

const store = {
  // important!
  namespaced: true,
  state: {...}
  actions: {...},
  mutations: {...},
  getters: {...}
}

// The main component
Main = {
  data: () => {...},
  components: {...},

  // register the store under MyStoreNamespace in the created callback
  created() {this.$store.registerModule('MyStoreNamespace', store)}

  computed: {
     someStateVal() {
       return this.$store.state.MyStoreNamespace.someValue
    }
  },

  methods: {
    updateSomeValue() {
      this.$store.dispatch('MyStoreNamespace/updateSomeValue')
    }
  }
}

---

[jonwinton]

👍 👍 👍 We'll look at getting this incorporated! Thank you!

[oscarpolanco]

Hello everyone Here is the PR that is adding this issue to the docs

[oscarpolanco]

Docs link => https://docs.clayplatform.com/clay-kiln/docs/vuex_plugin