Giter Club home page Giter Club logo

igeligel / vuex-feature-scoped-structure Goto Github PK

View Code? Open in Web Editor NEW
225.0 10.0 32.0 379 KB

:chart_with_upwards_trend: Feature scoped Vuex modules to have a better organization of business logic code inside Vuex modules based on Large-scale Vuex application structures @3yourmind

Home Page: https://vuex-feature-scoped-structure.netlify.com/

License: MIT License

JavaScript 83.73% HTML 0.84% Vue 15.44%
vuex vue vuejs2 vue2 large-scale modules blogpost containers container

vuex-feature-scoped-structure's Introduction

vuex-feature-scoped-structure by igeligel

A Vue.js/Vuex project showcasing a complex but scalable store structure. This project was created in cooperation with 3yourmind.

badge of license badge of pull request welcome badge of hiring advertisement of 3yourmind badge of github star

Showcase/Architecture

A feature scoped, but still namespaced store structure. index.vue is the container of the module.

diagram

structure of the store system

file structure structure of the store system in visual studio code

Dependencies

npm dependencies
Dependency Version
vue ^2.5.13
vue-router ^3.0.1
vuex ^3.0.1

Installation

The installation process is split into two sections for development and production use. You can find a production version of this site live at vuex-feature-scoped-structure.netlify.com.

Development

instructions

Using npm

npm install
npm run dev

Using yarn

yarn install
yarn run dev

Production

instructions

Using npm

npm install
npm run build

Using yarn

yarn install
yarn run build

Examples

Contact

Twitter of Kevin Peters

Contributors


igeligel

Contributions: 28

License

vuex-feature-scoped-structure is realeased under the MIT License.

vuex-feature-scoped-structure's People

Contributors

igeligel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vuex-feature-scoped-structure's Issues

With vue router

When using vue router with this structure you need to check if the module exists in the create of that module. this.$store.registerModule('$_products', store); needs to be replaced with

if (!(this.$store && this.$store.state && this.$store.state.$_products)) {
  this.$store.registerModule('$_products', store);
}

Or else the module will be registered every time the page is being called and you get some weird behaviour.

CreateNamespacedHelpers

Hey, first of all love this folder structure, it's very nice and clean to work with.

Have you got any examples with registering your modules that will allow for the use of a create namespaced helpers within the store?

Thank's

Scoped router

should i scope the router too?. what if module contain create, read, update delete?. thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.