Merge pull request #72 from davestewart/feature/variable-expansion

Feature/variable expansion

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) 
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2019-09-08
+
+### Added
+- Enable variable expansion in component helper paths
+
 ## [1.3.0] - 2019-09-08
 
 ### Added

docs/pages/api/component.md

@@ -156,7 +156,7 @@ You can use:
 
 - [array syntax](#array-syntax) - to map properties 1:1 with the store
 - [object syntax](#object-syntax) - to map properties with different names on the component
-- [wildcard syntax](#wildcard-syntax) - to grab sets of properties automatically
+- [wildcard expansion](#wildcard-expansion) - to grab sets of properties automatically
 
 Each syntax generates an **Object** of **named properties** which must be mixed in to the associated block (`computed` or `methods`) or set as the block itself:
 
@@ -405,4 +405,4 @@ export default {
 }
 ```
 
-If you're interested to see what happens behind the scenes [check out the code](https://github.com/davestewart/vuex-pathify/blob/develop/src/helpers/modules.js) on GitHub.
+If you're interested to see what happens behind the scenes [check out the code](https://github.com/davestewart/vuex-pathify/blob/develop/src/helpers/modules.js) on GitHub.

docs/pages/api/paths.md

@@ -7,6 +7,7 @@
 Pathify provides a rich [path syntax](#core-syntax) to access Vuex stores, including:
 
 - module, property and sub-property access
+- variable expansion 
 - wildcard expansion
 
 There are some additional [direct syntaxes](#direct-syntax) as well, which are designed to handle customisation around non `get/set` naming:
@@ -86,7 +87,29 @@ set('filters@search', 'blue')
 See the [sub-property access](/api/properties.md#sub-property-access) section for more information.
 
 
-### Wildcard syntax
+### Variable expansion
+
+Variable `:notation` allows you to use component properties to dynamically build references to store properties.
+
+They may only be used in [component helpers](/api/component.md) but can reference store properties or sub-properties:
+
+```js
+// dynamically reference a property or sub-property  
+get('projects/:slug') 
+get('projects@:slug') 
+
+// dynamically sync a deeply-nested property using object and array notation using multiple variables 
+sync('clients/:name@project[:index].name') 
+```
+
+Note the following caveats:
+
+- only top-level properties may be used as variable names, i.e. `:index` but not `:options.index`
+- when getting, only `state` will be referenced; `getters` will be ignored
+- when setting, only `mutations` will be referenced; `actions` will be ignored
+- you can use array `[:index]` or dot `.index` notation for arrays
+
+### Wildcard expansion
 
 Wildcards `*` allow you to reference multiple properties at once, and are used only in components:
 

docs/pages/home.md

@@ -55,6 +55,13 @@ Wire **multiple** properties (or sub-properties) using **array**, **object** and
 ```
 
 
+Use **variable expansion** to dynamically reference store properties:
+
+```pathify
+get('products/:index'),
+```
+
+
 Set up your store – **no matter how complex** – in a single line:
 
 ```pathify
@@ -85,4 +92,4 @@ To see Pathify in action:
 For a deeper insight:
 
 - read the [Intro](/intro/pathify.md) for an overview of the Pathify mechanism
-- check out the [code comparison](https://codesandbox.io/s/github/davestewart/vuex-pathify-demos/tree/master/main?initialpath=code) demos which illustrate reductions in Vuex code of between **2 and 14 times** 
+- check out the [code comparison](https://codesandbox.io/s/github/davestewart/vuex-pathify-demos/tree/master/main?initialpath=code) demos which illustrate reductions in Vuex code of between **2 and 14 times**