How to use vuex - 10 common examples

<script>
import { mapMutations } from 'vuex'

// export default {
//   methods: {
//     drawerToggle () {
//       this.$store.commit('drawerToggle')
//     }
//   }
// }

export default {
  methods: {
    ...mapMutations('menu', {
      drawerToggle: 'drawerToggle'
    })
    // prova () {
    //   console.log('prima del click: ' + this.$store.state.menu.drawer)
    //   this.drawerToggle()
    //   console.log('dopo click: ' + this.$store.state.menu.drawer)
    // }
  }
}
</script>

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<string, unknown> {
        const i18n = useI18n();
        const router = useRouter();
        const store = useStore<State>();

        const chart = ref<Chart>(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<string, unknown> {
        const i18n = useI18n();
        const store = useStore<State>();
        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,

<script>
import { mapGetters } from 'vuex'

// common functionality for all main components
export default {
  computed: mapGetters('state', ['navigation']),

  metaInfo () {
    const { navItemId, navItemTitle } = this.$route.meta

    // prefer the navItem.title as is is reactive
    const navItem = this.navigation[navItemId]
    const title = navItem ? navItem.title : navItemTitle

    return { title }
  }
}
</script>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'd2-header-size',
  computed: {
    ...mapState('d2admin/size', [
      'value'
    ])
  },
  watch: {
    // 注意 这里是关键
    // 因为需要访问 this.$ELEMENT 所以只能在这里使用这种方式
    value: {
      handler (val, oldVal) {
        // https://github.com/d2-projects/d2-admin/pull/129
        if (oldVal) {
          // 这个情况在已经加载完页面 用户改变了尺寸时触发
          this.$ELEMENT.size = val
          // 由于已经加载过设置 需要清空缓存设置
          this.pageKeepAliveClean()
          // 由于已经加载过设置 需要刷新此页面
          this.$router.replace('/refresh')

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
    name: 'reply',
    data() {
        return {
            json: '',       // 回复的评论数据
            myReply: [],    // 我的回复
            allReply: []    // 全部回复
        }
    },
    methods: {
        ...mapMutations('detail', [
            'set_talkReply'
        ]),
        ...mapActions('detail', [
            'get_Reply_data'
        ]),
        // 获取我的回复数据
        get_myReply() {
            let params = {
                'remarkid': this.json.remarkid,
                'type': 'userself',
                'page': 1
            }
            this.get_Reply_data(params).then(res => {
                if (res) {
                    this.myReply = res
                } else {
                    this.myReply = []
                }
            })