ir-vuex-directus

    3.2.0 • 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/',
      filterGroups: true, // this enables the content filtering with groups
      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 token and group

    Actions

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

    • login({ email, password})
    • getItems({ tableName, group})
    • deleteToken()
    • preloadData() 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>
    

    Install

    npm i ir-vuex-directus

    DownloadsWeekly Downloads

    40

    Version

    3.2.0

    License

    ISC

    Unpacked Size

    92.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar