ir-vuex-directus
TypeScript icon, indicating that this package has built-in type declarations

8.0.1 • Public • Published

ir-vuex-directus

coverage report

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: 'user@directus.io', password: 'secret' }).then(() => doSomething());
  },
  methods: {
    fetchTableTexts() {
      this.$store.dispatch('directus/getItems', { tableName: 'texts' });
    },
  },
};
</script>

Readme

Keywords

Package Sidebar

Install

npm i ir-vuex-directus

Weekly Downloads

76

Version

8.0.1

License

ISC

Unpacked Size

582 kB

Total Files

20

Last publish

Collaborators

  • ava.digital
  • atriaka
  • youca