This repository is not actively maintained. I haven’t used this package for a year. It means there has been no change.
You can still use this as long as it works in your environment. I do not guarantee it works with Vue 3.
You may want to check out another libraries like pinia
vuex-dry
helps keep your vuex code DRY. It doesn’t introduce any whole new way to use vuex. It just helps build modules for you with a minimum amount of code, adding some convenient getters, mutations, and actions.
vuex-dry
is TypeScript-friendly since it’s written in TypeScript.
npm i vuex-dry -S
Add the plugin to your vuex store.
import { plugin } from "vuex-dry";
new Vuex.Store({
plugins: [plugin],
...
});
import { Module } from "vuex-dry";
const user = Module.build({
state() {
return {
name: undefined
};
}
});
const store = new Vuex.Store({
modules: {
user
}
});
That’s it. At Module.build()
, we put a function named state
returning an object. This object will be used as an initial state and also used when you want to reset a specific state or even whole state. We’ll see how to reset things later.
Let’s look at the module building part again.
Module.build({
state() {
return {
name: undefined
};
}
});
The code above is effectively same as the following:
{
namespaced: true,
state {
name: undefined
},
getters: {
name: state => state.name
},
mutations: {
name$assign(state, value) {
state.name = value;
},
name$reset(state) {
state.name = undefined;
},
$resetAll(state) {
state.name = undefined;
// also resetting other states if exists
}
},
actions: {
name$assign({ commit }, value) {
commit("name$assign", value);
},
name$reset({ commit }) {
commit("name$reset");
},
$resetAll({ commit }) {
commit("$resetAll");
}
}
})
You see what has been done here?
The followings are added to your module:
name
name$assign
to set a value to the state name
.name$reset
to reset the state name
.$resetAll
to reset all states from the module.These are always repeated every time we write vuex code. And now you don’t need them anymore.
Let me show you how easy you can access/handle arrays and objects with vuex-dry
.
And you will see how to map those getters in your component and you even can map a specific nested property of an object.
READ THE FULL DOCUMENT (It will probably take only 3 minutes)
vuex-dry
?It keeps your code DRY. You don’t have to write meaningless similar codes over and over again.
vuex-pathify
?vuex-pathify
is a great library. It let you do things without any coding but just with conventions. A downside is it introduces its own conventions and once you get started with it, you’re in a whole new thing. On some level, you’re using vuex through APIs of vuex-pathify
, but on the outside you actually are not using vuex
anymore.
On the other hand, vuex-dry
just simply creates vuex modules and they are completely compatible with your existing vuex store and modules. And since it’s creating pure vuex modules, you can extend it as you want. It’s highly customizable. In that sense, it’s really easy to introduce vuex-dry
into your current project and you don’t even have to replace all your vuex codes with vuex-dry
. You can partially adjust vuex-dry
and there’s no problem with that.
Eunjae Lee, Released under the MIT License.
Author: eunjae-lee
GitHub: https://github.com/eunjae-lee/vuex-dry
#vuejs #javascript #vue #vue-js