How to use vuex - 10 common examples

export default {
  name: 'TaskTableView',
  data () {
    return {
      // setInterval handle
      handle: undefined
    }
  },
  props: {
    title: String
  },
  computed: {
    ...mapState('spider', [
      'spiderForm'
    ]),
    ...mapState('task', [
      'taskList'
    ])
  },
  methods: {
    onClickSpider (row) {
      this.$router.push(`/spiders/${row.spider_id}`)
    },
    onClickNode (row) {
      this.$router.push(`/nodes/${row.node_id}`)
    },
    onClickTask (row) {
      this.$router.push(`/tasks/${row._id}`)
    },
    onRefresh () {
      if (this.$route.path.split('/')[1] === 'spiders') {
        this.$store.dispatch('spider/getTaskList', this.$route.params.id)

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,

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,
        };

ready() {
    DEBUG && console.log('init component %s', this.$options.name)
    var mainView = store.mainView

    mainView.router.loadContent(this.$els.page)
    F7.params.swipePanel = 'left' // this.$route.panel
  },
}

import { mapGetters } from 'vuex';
import { Getters } from 'simput/src/stores/types';

import GlobalSettings from 'simput/src/components/core/GlobalSettings';
import WorkflowMenu from 'simput/src/components/core/WorkflowMenu';

// ----------------------------------------------------------------------------

export default {
  name: 'ControlsDrawer',
  components: {
    GlobalSettings,
    WorkflowMenu,
  },
  computed: Object.assign(
    mapGetters({
      dataModel: Getters.SIMPUT_MODEL,
    })
  ),
  data() {
    return {
      activeTab: 0,
    };
  },
};

},

        watch: {
            // update Howler volume on volume change
            volume(value) {
                Howler.volume(value);
            },

            // update Howler muted state on mute change
            muted(value) {
                Howler.mute(value);
            },
        },

        computed: {
            ...mapGetters(PlayerNamespace, {
                isPaused: 'isPaused',
                isPlaying: 'isPlaying',
                isStopped: 'isStopped',
                isLoading: 'isLoading',
                queueSize: 'queueSize',
                currentSong: 'currentSong',
            }),

            ...mapState({
                apiToken: state => state.auth.token,
                apiUrl: state => state.config.api.base,
            }),

            ...mapState(PlayerNamespace, {
                mode: state => state.mode,
                queue: state => state.queue,