direct-vuex - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

.vscode/settings.json

		@@ -19,21 +19,2 @@ {
		"search.useIgnoreFiles": true,
		"todo-tree.highlights.customHighlight": {
		"TODO": {
		"icon": "check",
		"iconColour": "#cc4"
		},
		"FIXME": {
		"background": "#fa4",
		"opacity": 60,
		"iconColour": "#f5a542"
		}
		},
		"todo-tree.highlights.defaultHighlight": {
		"icon": "alert",
		"type": "text",
		"foreground": "#632",
		"background": "#dd8",
		"opacity": 50
		},
		"todo-tree.highlights.highlightDelay": 50,
		"tslint.configFile": "tslint.json",
		@@ -40,0 +21,0 @@ "typescript.locale": "en",

package.json

		{
		"name": "direct-vuex",
		"version": "0.1.0",
		"description": "Just Vuex with typing.",
		"version": "0.1.1",
		"description": "Just Vuex with typing. Compatible with the Vue 3 composition API.",
		"author": "Paleo",
		@@ -35,4 +35,7 @@ "main": "dist/direct-vuex.js",
		"typing",
		"typescript"
		"typescript",
		"vue3",
		"vue",
		"vuejs"
		]
		}

README.md

		# direct-vuex

		Just Vuex with typing.
		Just Vuex with typing. Compatible with the Vue 3 composition API.

		@@ -9,8 +9,15 @@ ## How to use

		First, install `direct-vuex`:
		First, add `direct-vuex` to the Vue application:

		npm install vue vuex direct-vuex
		npm install direct-vuex

		### Create the store

		The store is implemented in the same way as usual. But it is necessary to add `as const` on the module options:

		export default {
		namespaced: true,
		// …
		} as const

		Then, create the store:
		@@ -28,3 +35,3 @@

		The original Vuex store is still accessible through `store.original`:
		The classic Vuex store is still accessible through the `store.original` property. We need it to initialize the Vue application:

		@@ -35,8 +42,7 @@ import Vue from "vue"
		new Vue({
		store: store.original, // Inject the classic Vuex store
		// …
		store: store.original,
		// …
		}).$mount("#app")

		### Use the direct store
		### Use the direct store from Vue components

		@@ -47,16 +53,22 @@ From a component, import the store.

		Then, the following line:
		Then, the old way to call an action:

		store.dispatch("myModule/myAction", myPayload)

		… is replaced by the following wrapper:

		store.dispatch.myModule.myAction(myPayload)

		… replaces the old one:
		… which is fully typed.

		store.dispatch("myModule/myAction", myPayload)
		Typed getters and mutations are accessible the same way:

		Notice: It is still possible to use the injected `this.$store`, which is the original Vuex store.
		store.getters.myModule.myGetter;
		store.commit.myModule.myMutation(myPayload);

		Notice: The underlying Vuex store can be used simultaneously if you wish, through the injected `this.$store` or `store.original`.

		## Limitations

		- Modules must be namespaced;
		- Actions must return a `Promise`;
		- Actions can't be declared with the object alternative syntax.
		@@ -68,3 +80,2 @@

		- Todo Tree from Gruntfuggly (`gruntfuggly.todo-tree`)
		- TSLint from Microsoft (`ms-vscode.vscode-typescript-tslint-plugin`)

direct-vuex - npm Package Compare versions

Improved metrics

Worsened metrics