Vue-hasher NPM

Vue Hasher

A Vue plugin to sync state with URL Hash.

This plugin requires that your project use Vue Router

Check out the demo

Why?

Allow users to bookmark:
- filtered lists
- searched lists
- modal states
- etc.

Install

yarn add -D vue-hasher
# or
npm i -D vue-hasher

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueHasher from 'vue-hasher';

Vue.use(VueRouter);
Vue.use(VueHasher);

Examples

Basic sync

<template>
  <input v-model="term" type="text" placeholder="Search term" />
</template>

<script>
  export default {
    name: 'Users',

    data() {
      return {
        term: ''
      };
    },

    beforeMount() {
      /**
       * the first argument is the local state key
       * the second argument is the hash key
       */
      this.$hasher.sync('term', 'term');
    }
  };
</script>

Vuex

import { mapState } = 'vuex';

export default {
  name: 'Users',

  computed: {
    ...mapState('users', ['showModal'])
  },

  beforeMount() {
    this.$hasher.sync('showModal', 'showAddUserModal', (newVal) => {
      this.$store.commit('users/setShowModal', newVal);
    });
  }
};

Hash Encoding and Decoding

When a hash is set via a VueHasher mixin method, it is first encoded using the qs library's stringify method.
When a hash is privided by the global $hash computed property, it is decoded using the qs library's parse method.
- String values true and false are coicerced to booleans.

npm.io

Global Mixin

A global mixin is installed by this plugin.

Computed

`vm.$hash`

Provides hash information

Returns {object}

{
  parsed: { term: 'foobar' },
  raw: '#term=foobar'
}

Methods

`vm.$hasher.clear()`

Clears hash

Returns {void}

`vm.$hasher.exists(key)`

Provides if hash key exists

Arguments
- {string} key
Returns {boolean}

`vm.$hasher.remove(key)`

Removes hash value by key

Arguments
- {object} hash
Returns {void}

`vm.$hasher.replace(hash)`

Replaces hash with new value

Arguments
- {object} hash
Returns {void}

`vm.$hasher.set(key, value)`

Sets hash value by key

Arguments
- {string} key
- {mixed} value
Returns {void}

`vm.$hasher.sync(key, watch, hashParsedWatchCallback)`

Syncs a hash key with specific component state.

When first called, it will sync the current hash to the state. It then sets up two watchers -- one for hash changes and one for state changes.

Watchers are destroyed when the component is destroyed.

Arguments
- {string} key
- {string} value
- {function} hashParsedWatchCallback optional
  - Called when Vue Router hash change detected
  - Invoked immediatey
  - Arguments
    - {mixed} newVal
Returns {void}