Have ideas to improve npm?Join in the discussion! »

    staci
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.6 • Public • Published

    Staci - GitHub license npm version

    Staci is a library built on top of vuex that provide a simple way to get type checking

    Atention: At the moment this library is not working, i dont know when i fix it. sorry!

    Install

      npm install staci
      yarn add staci

    Preview

    Example (in example folder)

    store.ts

    import {
      createStore,
      createGetters,
      createMutations,
      createActions,
    } from 'staci';
    import Staci from 'staci';
     
    // Use it as a plugin, like always
    Vue.use(Vuex);
     
    // Data
     
    const seriesData: Serie[] = [
      { name: 'The Flash', season: 4, episode: 6 },
      { name: 'Arrow', season: 5, episode: 2 },
      { name: 'Altered Carbon', season: 1, episode: 8 },
    ];
     
    // Types
     
    interface Serie {
      name: string;
      season: number;
      episode: number;
    }
     
    interface SerieState {
      series: Serie[];
    }
     
    // Store
     
    const state: SerieState = {
      series: [],
    };
     
    const getters = createGetters(state)({
      series: state => state.series,
    });
     
    const mutations = createMutations(state)({
      loadSeries(state, series) {
        state.series = series;
      },
    });
     
    const actions = createActions(state, getters, mutations)({
      getSeries({ commit }) {
        commit('loadSeries');
        return seriesData;
      },
    });
     
    const seriesModule = {
      state,
      getters,
      actions,
      mutations,
    };
     
    const mainStore = {
      modules: {
        series: seriesModule,
      },
    };
     
    // Create the Vuex.Store to later register it in Vue
     
    export const store = new Vuex.Store(mainStore);
     
    // createStore returns all the functionality you need to interact with the store
    export default createStore(mainStore);

    index.ts

    import Vue from 'vue';
     
    import Series from './Series.vue';
    import { store } from './store';
     
    new Vue({
      render: h => h(Series),
      // Register the store from Vuex.Store
      store,
      components: { Series },
    }).$mount('#app');

    Series.vue

    <template>
      <div id="app">
        <div v-for="serie in series" v-bind:key="serie.name">
          <h1>{{serie.name}}</h1>
          <h2>S{{serie.season}}E{{serie.episode}}</h2>
        </div>
      </div>
    </template>
     
    <script lang="ts">
    import Vue from 'vue';
     
    import store from './store';
     
    const { store: serieStore, mapGetters } = store.mapModule('series');
     
    export default Vue.extend({
      name: 'Series',
      mounted() {
        serieStore.dispatch('getSeries');
      },
      computed: {
        ...mapGetters(['series']),
      },
    });
    </script> 

    Licence

    MIT

    Install

    npm i staci

    DownloadsWeekly Downloads

    24

    Version

    1.1.6

    License

    MIT

    Unpacked Size

    18.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar