How to use the vuex.useStore function in vuex

To help you get started, we’ve selected a few vuex examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github facette / facette / ui / src / views / admin / metrics / modal / chart-preview.vue View on Github external
setup(): Record {
        const i18n = useI18n();
        const router = useRouter();
        const store = useStore();

        const chart = ref(cloneDeep(defaultChart));

        const createChart = (): void => {
            // Prefill series data into store
            store.commit("routeData", {prefill: chart.value.series});

            router.push({name: "admin-charts-edit", params: {id: "new"}});
        };

        const onShow = (params: ModalChartPreviewParams): void => {
            chart.value.series = [{expr: params.expr}];
        };

        return {
            chart,
github facette / facette / ui / src / views / dashboards / home / home.vue View on Github external
setup(): Record {
        const i18n = useI18n();
        const store = useStore();
        const ui = useUI();

        const {loading} = common;

        onMounted(() => {
            ui.title();

            // TODO: implement home and get rid of this hack
            store.commit("loading", true);
            nextTick(() => store.commit("loading", false));
        });

        return {
            i18n,
            loading,
        };
github monitoror / monitoror / ui / src / composables / useTileCommons.ts View on Github external
export default function useTileCommons(config: TileConfig) {
  const store = useStore()

  const type = computed((): TileType => {
    return config.type
  })

  const stateKey = computed((): string => {
    return config.stateKey
  })

  const theme = computed((): string => {
    return store.getters.theme.toString().toLowerCase()
  })

  const state = computed((): TileState | undefined => {
    if (!Object.keys(store.state.tilesState).includes(stateKey.value)) {
      return
github facette / facette / ui / src / views / admin / charts / edit.vue View on Github external
setup(): Record {
        const i18n = useI18n();
        const router = useRouter();
        const store = useStore();
        const ui = useUI();

        const {
            applyRouteParams,
            beforeRoute,
            erred,
            loading,
            modifiers,
            onFetchRejected,
            prevRoute,
            routeGuarded,
            watchGuard,
            unwatchGuard,
        } = common;

        const chart = ref(null);
github facette / facette / ui / src / components / chart / chart.vue View on Github external
setup(props: Record, ctx: SetupContext): Record {
        const i18n = useI18n();
        const store = useStore();
        const ui = useUI();

        const {onFetchRejected} = common;

        let domRect: DOMRect | null = null;
        let instance: boula.Chart | null = null;
        let intersection: IntersectionObserver | null = null;
        let lastDate: Date | null = null;
        let resize: ResizeObserver | null = null;

        const chart = ref(null);
        const data = ref(null);
        const el = ref(null);
        const hasMore = ref(false);
        const loading = ref(true);
        const sliders = ref<{backward: boolean; forward: boolean}>({backward: false, forward: false});
github facette / facette / ui / src / views / admin / database / database.vue View on Github external
setup(): Record {
        const i18n = useI18n();
        const store = useStore();
        const ui = useUI();

        const file = ref(null);

        const apiOptions = computed(() => store.state.apiOptions);

        const dump = (): void => {
            location.href = `${apiPrefix}/store`;
        };

        const restore = async (): Promise => {
            const curFile = file.value?.files?.[0];
            if (file.value === null || curFile === undefined) {
                throw Error("cannot get file");
            }
github facette / facette / ui / src / views / admin / providers / edit.vue View on Github external
setup(): Record {
        const i18n = useI18n();
        const router = useRouter();
        const store = useStore();
        const ui = useUI();

        const {
            applyRouteParams,
            beforeRoute,
            erred,
            loading,
            modifiers,
            onFetchRejected,
            routeGuarded,
            watchGuard,
            unwatchGuard,
        } = common;

        const form = ref(null);
        const invalid = ref(false);
github facette / facette / ui / src / main.vue View on Github external
setup(): void {
        const store = useStore();
        const ui = useUI();

        const onModifier = (ev: Event | KeyboardEvent): void => {
            switch (ev.type) {
                case "keydown":
                case "keyup": {
                    const ke = ev as KeyboardEvent;
                    let key: string;

                    if (ke.code === "AltLeft" || ke.code === "AltRight") {
                        key = "alt";
                    } else if (ke.code === "ShiftLeft" || ke.code === "ShiftRight") {
                        key = "shift";
                    } else {
                        break;
                    }
github monitoror / monitoror / ui / src / composables / useTileBuild.ts View on Github external
export default function useTileBuild(type: ComputedRef, status: ComputedRef, build: ComputedRef) {
  const store = useStore()

  const now = computed((): Date => {
    return store.state.now
  })

  const mergeRequestLabelPrefix = computed((): string | undefined => {
    if (mergeRequest.value === undefined) {
      return
    }

    let mergeRequestPrefix = 'MR'
    if (type.value === TileType.GitHubPullRequest) {
      mergeRequestPrefix = 'PR'
    }

    return mergeRequestPrefix + '#' + mergeRequest.value.id
github facette / facette / ui / src / views / admin / providers / sidebar.vue View on Github external
setup(): Record {
        const i18n = useI18n();
        const store = useStore();

        const {loading, sidebar} = common;

        const routeData = computed(() => store.state.routeData);

        return {
            i18n,
            loading,
            routeData,
            sidebar,
        };
    },
};