[improvement] Documentation 101 example should show what Call() and Sync() does, as it does Get() and Set()

[Derasm]

s it is right now, the the Call() function and Sync() is not explained in 101 page - the rest of them are. This makes it quite difficult to reference how it should be used, and makes it into a wild goosechase to find in the docs.

Example:

store.Sync("propertName") sets up a two-way binding on the store property, similar to v-model on a component.
store.Call()  Does something. i have yet to be able to find what the heck it. 

Likewise, the "Paths are Mapped to store members via a configurable naming scheme part on Pathify 101 would be easily improved if it included an example of each of the 4 types of actions that can be done: note: preface to these should be this.$store, but for brevity we'll write store.get here.

store.get("products") ->functions similarly to: this.$store.state.products.items or: store.getters["products"]
store.set("products", newProducts) -> first does:  store.dispatch("setProducts", newProducts) then calls mutation committing it with:  store.commit("SET_PRODUCTS", newProducts). the setProducts is an action, while the SET_PRODUCTS is a setter as mentioned above. This can be changed under "mapping" settings. 
store.set("SET_PRODUCTS", newProducts) -> calls the setter directly.
store.set("setProducts", newProducts) -> calls the action, which is asynchronous. 

if these are called within the store itself, it functions the same with commit and payload respectively.

• Commit: Used for setters(uncertain)
• dispatch: used for actions(uncertain)

question: can you use the typical get/set in the store itself?

[davestewart]

Hey,

Sorry for the late reply. The docs could really do with some improvement; they are too wordy and is mainly Guide with no API reference, so sorry you had to chase down wild geese.

To answer your questions as best I can:

Call and Sync (capitalised)

Anything capitalised will be the TS class decorator equivalents of the JS helper functions for using Class Components. This bit was actually from a contributor, so sorry if that wasn't documented fully. I'll take a look at some point (won't be soon).

Likewise, the "Paths are Mapped to store members via a configurable naming scheme part on Pathify 101 would be easily improved if it included an example of each of the 4 types of actions that can be done:

The naming scheme is actually this bit:

• https://davestewart.github.io/vuex-pathify/#/setup/mapping

As for examples, this is covered by the 101 and the demos:

• https://davestewart.github.io/vuex-pathify/#/intro/demos

You make various other points which I'll not get into now because you're right, the docs need improving.

When I wrote them, I thought they were great, but having been away from them myself for a while, I can see how for someone missing a couple of prerequisites, or had some mistaken assumptions, they could be hard to understand.

If you have the time and inclination, they are best read from start to finish using the "next" arrows at the bottom of each page.

The problem with Pathify is it's simple to use (could probably document it in a couple of pages) but lots going on to make it simple, which I wanted to try and explain... but it gets very verbose.

Unfortunately I have very little time for OSS these days, so I just never get time to update them.

Have a little scan of the demos and everything should become clearer (I hope!):

• https://codesandbox.io/s/github/davestewart/vuex-pathify-demos/tree/master/main

Make sure you click the big green buttons in the browser to load the code in the left pane. All should become clear.

question: can you use the typical get/set in the store itself?

There are 2 main ways to use Pathify:

• using the component helpers get and sync which basically replace the Vuex mapBlah functions
• calling methods directly on the store such as this.$store.set('foo/bar', 123)

Generally you won't need to use the methods on the store so much if you're using get and sync.

Any more questions, feel free to ask.

[davestewart]

Also, FYI a job I was working on this morning, with get, sync and call:

<template>
    <el-container>
        <el-aside>

        </el-aside>
        <el-main>
            <h1>{{ $options.head.title }}</h1>

            <el-form @submit.native.prevent="search">
                <el-input v-model="query" placeholder="Please input" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </el-form>

            <section v-if="loading">
                Loading
            </section>
            <section v-else class="news__articles">
                <article v-for="result in results" :key="result.acc" class="article">
                    <h3 class="news__articleTitle">{{ result.title }}</h3>
                    <ul class="news__articleStats">
                        <li>{{ result.publishedAt }}</li>
                        <li>{{ result.words }} words</li>
                        <li>{{ result.source.name }}</li>
                    </ul>
                    <p>{{ result.description }}</p>
                </article>
            </section>

        </el-main>
    </el-container>
</template>

<script>
  import { sync, call } from 'vuex-pathify'
  import page from './page'

  export default {
    extends: page('News Search'),

    computed: sync('news', [
      'query',
      'loading',
      'results',
    ]),

    methods: {
      search: call('news/search'),
    }
  }
</script>

LMK if any questions.

[Derasm]

Hey Dave, no probs with the late reply. Is there a way to help with the docs? Some kind of "improve this" option for them if they are hosted in Github or similar?

[Derasm]

Also updated question: Getters with parameters. In practically any other situation i'd say this.$store.get("GetSomeMethod", somedata) would be equivalent to a getter like so: function(state, somedata) However all i could find was the possibility for sending state and getters, but no dynamic data - which makes using said data in the getter pretty hard. Is this something that is doable, or should i make use of Actions for this instead?

[davestewart]

Hi Dennis.

Re: docs, sure, you can submit a pull request!

Re: getters, not 100% sure I understand what you're asking.

Here is an example of using a getter with parameters:

• https://codesandbox.io/s/vuex-pathify-main-demo-forked-g8rd7?file=/src/App.vue

Note the format of the store getter, which is a function that returns a function (as described in the Vuex docs):

  salutation: (state) => (name) => {
    return `${state.greeting} ${name} !`;
  }

Is that what you need?