ir-vuex-directus

this is a vuex module that handles data fetching from directus cms

Installation

import the vuex-directus module like any other vuex module and pass in your directus configuration

ATTENTION: this module is written as es6 module and will not work without transpilation in older browsers!

import Vuex from 'vuex';

// Modules
import directus from '@/lib/vuex-directus';

const directusConfig = {
  apiUrl: 'http://directus.io/',
  tables: [
    // can be either string or object
    'login',
    'imprint',
    'texts',
    { name: 'emergency_contacts', preload: true },
    { name: 'routes_info', preload: true, group: true },
  ],
};
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    directus: directus(directusConfig),
  },
});

State

upon instantiation a state object with value null is created for every table from the configuration object. Additionally there are always the properties authenticated and group

Actions

the follogin actions can be dispatched on the vuex-directus module:

• login({ email, password})
• me()
• logout()
• refresh()
• getItems({ tableName, group, filters, params, published, languages })
• createItem({ tableName, data })
• deleteToken() every action mutates the store with the received data

Example

for non-public routes the user needs to login first, this can be done inside of a component (e.g. Login.vue). The action returns a promise if the login succeeds

<script>
export default {
  computed: {
    ...mapstate('directus', {
      'texts': state => state.texts,
    }),
  },
  mounted() {
    this.$store.dispatch('directus/login', { email: '[email protected]', password: 'secret' }).then(() => doSomething());
  },
  methods: {
    fetchTableTexts() {
      this.$store.dispatch('directus/getItems', { tableName: 'texts' });
    },
  },
};
</script>