Generator-vuex-starter NPM

generator-vuex-starter

a vuex starter

Installation

First, install Yeoman and generator-vuex-starter using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-vuex-starter

Then generate your new project:

yo vuex-starter

Use step

1: create type and state

cd $prodir/src/store

export const USER_NAME = "user_name";

const commonState = {
  status:{failure:true},
  res:{}
}

const state = {
  [USER_NAME]:commonState,
}

export default state

2: add actions

import {createActions} from '../utils/index'
import * as stateType from './stateType'

function userNameGet() {
  return {
    type: stateType.USER_NAME,
    payload: {
      endpoint: '/v1/isConnect',
      options: {
        method: 'GET'
      }
    }
  }
}

export const user_name = createActions(userNameGet);

3: add mutation

import * as stateType from './stateType'
import {createMutations} from '../utils/index'

const mutations = {
  [stateType.USER_NAME]:createMutations(stateType.USER_NAME)
}

export default mutations

4: use in vue-file

import {user_name} from '../store/actions/actions'
import {USER_NAME} from '../store/stateType'

export default {
  name: 'hello',
  data() {
      return{
        status:this.$store.state[USER_NAME],
      }
    },
    computed:{
      if(this.$store.state[USER_NAME].status.success)
        return this.$store.state[USER_NAME].res;
      else 
        return {};
    },
    methods: {
      handleSelect() {
        user_name(this.$store); //dispatch actions
      }
    }
}