How to use vuex-pathify - 10 common examples

*
       * The Icon class demonstrates:
       *
       *  - new properties from existing values, i.e. title and hex color
       *  - a render() function to transform existing values (SVG) at run time
       *
       * As the functionality is encapsulated on the Icon class, the methods can be called from anywhere.
       *
       * Try running this in the console:
       *
       *  - store.get('icons/data')[0].show()
       */
      icons: get('icons/data'),

      // sync style in store
      style: sync('icons/style'),
    },

    watch: {
      name: 'update',
      color : 'update',
    },

    // to target non SET_* members, use these techniques:
    methods: {

      // call mutation using direct access (!) syntax
      addIcon () {
        // try removing the ! to see what happens (check the console)
        // try using the commit() vuex alias to achieve the same
        this.$store.set('icons/ADD_ICON!', {name: this.name, color: this.color})
      },

const mutations = {

  // creates SET_* functions
  ...make.mutations(state),

  // additional increment function
  INCREMENT_FOO (state) {
    state.foo++
  }
}

const actions = {

  // creates redundant actions, but for foo only
  ...make.actions('foo'),

  // additional loadFoo action
  loadFoo ({commit}) {
    return new Promise (function (resolve, reject) {
      setTimeout(function () {
        const value = Date.now()
        commit('SET_FOO', value)
        resolve(value)
      }, 1000)
    })
  }
}

export default {
  namespaced: true,
  state,

var UNCATEGORIZED = {name:'Uncategorized', budget:0};

  export default {
    name: 'BudgetYear',
    mixins: [TableMixin],
    components: {PageWrap, BudgetYearPopover},
    data: () => ({
      cancelsearch: null,   // Cancel search token
      tablerows: null,      // Row items to display
      search: null,         // Current search string
      loading: false,       // True to show loading indicator
      count: 0,             // Total transactions in view
      start: null,          // Starting month
    }),
    computed: {
      categories: pathify.sync('budget/categories'),
      columns: function() { return this.initColumns(); },
      items: function() { return this.tablerows; },
      keymap: function() { return this.tableMixinKeymap(); },
      months: function() { return this.initMonths(); },
    },
    watch: {
      search: function() {
        this.refresh(true);
      },
    },
    mounted: function() {
      document.title = `PushingKarma - Past Year Spending`;
      this.start = dayjs().startOf('month');
      this.search = trim(this.search || this.$route.query.search || '');
      //this.refresh();
    },

/* webpackChunkName: "notfound" */
        '@/pages/general/404'
      ),
      PageSkeletonLoader: () => import('./SkeletonLoader'),
    },

    provide () {
      return { id: this.id }
    },

    data: () => ({ isLoading: false }),

    computed: {
      ...sync('route@params', ['namespace', 'page']),
      children: get('documentation/structure'),
      structure: sync('documentation/structure'),
      id () {
        if (!this.structure) return ''

        return this.page
      },
      text () {
        if (!this.structure) return ''

        return `${camelCase(this.namespace)}.${camelCase(this.page)}.headingText`
      },
    },

    watch: { '$route.path': 'onRouteChange' },

    asyncData: load,

export default {

    extends: base('repos1'),

    computed: {
      // get + path syntax
      repos: get('repos1/filteredItems'),

      // get + array syntax
      ...get('repos1', [
        'status',
        'readme'
      ]),

      // sync, sub-property + wildcard syntax
      ...sync('repos1/filters@*'),

      // sync, sub-property + object syntax
      ...sync('repos1/sort@', {
        sortOrder: 'order',
        sortKey: 'key',
      }),
    },

  }

import BudgetTransactions from './BudgetTransactions';
  import SidePanel from '@/components/site/SidePanel';
  import Dropzone from '@/components/Dropzone';
  import Navigation from '@/components/site/Navigation';
  
  export default {
    name: 'Budget',
    components: {BudgetMenu, BudgetMonth, BudgetYear, BudgetSettings,
      BudgetTransactions, Dropzone, Navigation, SidePanel},
    computed: {
      account: pathify.sync('budget/account'),
      accounts: pathify.sync('budget/accounts'),
      categories: pathify.sync('budget/categories'),
      summary: pathify.sync('budget/summary'),
      demo: pathify.sync('budget/demo'),
      view: pathify.sync('budget/view'),
    },
    watch: {
      view: function(view) {
        utils.updateHistory(this.$router, {view});
        window.scrollTo(0,0);
      },
      account: function(account) {
        var accountid = account ? account.id : null;
        utils.updateHistory(this.$router, {account:accountid});
        window.scrollTo(0,0);
      },
    },

    // Mounted
    // Setup navigation, demo, accounts
    created: async function() {

Link, ListItem, OrderedList, Bold, Code, Italic, Strike, TodoItem,
    TodoList, Underline, History} from 'tiptap-extensions';
  import bash from 'highlight.js/lib/languages/bash';
  import css from 'highlight.js/lib/languages/css';
  import javascript from 'highlight.js/lib/languages/javascript';
  import python from 'highlight.js/lib/languages/python';
  import sql from 'highlight.js/lib/languages/sql';
  import xml from 'highlight.js/lib/languages/xml';
  var LANGUAGES = {bash,css,javascript,python,sql,xml};

  export default {
    name: 'NotesEditMenu',
    components: {EditorMenuBar},
    computed: {
      editing: pathify.sync('notes/editing'),
      editor: pathify.sync('notes/editor'),
      note: pathify.sync('notes/note'),
      userid: pathify.get('global/user@id'),
    },
    data: () => ({
      linkUrl: null,        // Current URL text when editing links
      showLinkMenu: false,  // True when displaying link input
    }),

    watch: {
      // Watch Editing
      // When edit mode changes, make sure TipTap is informed.
      editing: function() {
        let editable = this.editing && (this.userid !== null);
        this.editor.setOptions({editable});
      },

export default {

    computed: {

      // single property
      store: get('module'),

      // accessor priority
      string: get('module/string'),

      // nested property syntax
      sub: sync('module/object@value'),
      nested: sync('module/object@a.b.c'),

      // array syntax
      ...sync('module', [
        'value',
        'string'
      ]),

      // object syntax
      ...get('module', {
        altValue: 'value',
        altString: 'string'
      }),
    }
  }

*
       * Pathify chooses same-named getters over same-named states, in this case returning an array of Icon
       * instances with transformed properties and additional methods, rather than just a plain Object
       *
       * The Icon class demonstrates:
       *
       *  - new properties from existing values, i.e. title and hex color
       *  - a render() function to transform existing values (SVG) at run time
       *
       * As the functionality is encapsulated on the Icon class, the methods can be called from anywhere.
       *
       * Try running this in the console:
       *
       *  - store.get('icons/data')[0].show()
       */
      icons: get('icons/data'),

      // sync style in store
      style: sync('icons/style'),
    },

    watch: {
      name: 'update',
      color : 'update',
    },

    // to target non SET_* members, use these techniques:
    methods: {

      // call mutation using direct access (!) syntax
      addIcon () {
        // try removing the ! to see what happens (check the console)