@mediv0/v-bucket
Advanced tools
📦 Fast, Simple, and Lightweight State Management for Vue 3.0 built with composition API, inspired by Vuex.
📦 Fast, Simple, and Lightweight State Management for Vue 3.0 built with composition API, inspired by Vuex.
Running the examples:
$ npm run dev
$ yarn dev
$ npm run test
$ yarn test
install this package from NPM:
$ npm install v-bucket
or yarn:
$ yarn add v-bucket
first you need to create your bucket. create an index.js file, then import createBucket from v-bucket to start creating your store, like this:
import { createBucket } from "v-bucket";
const bucket = createBucket({
states: {
// your states here
},
mutations: {
// your mutations here
},
getters: {
// your getters here
},
modules: {
// your modules here
}
});
export default bucket;
then import it in your app entry point, main.js like this:
import { createApp } from "vue";
import App from "./dev.vue";
// importing your bucket
import bucket from "./bucket/index";
createApp(App)
.use(bucket)
.mount("#app");
for using v-bucket inside the setup() function you need to import useBucket first. like this:
<script>
import { useBucket } from "v-bucket"
export default {
setup() {
// get access to the v-bucket
const bucket = useBucket();
// ...
return {
// ....
};
}
};
</script>
like vue 2.X apps you can access v-bucket on the vue instace outside of the setup() function. like this:
<script>
export default {
mounted() {
// accessing bucket on this
this.$bucket
// ...
},
methods: {
click() {
this.$bucket.commit("SET_ID", this.id);
// ...
}
}
};
</script>
you only import useBucket when you want to use it inside setup() function
this is a single object contains all your application states.
accessing states:
mounted() {
// accessing id state in the root level
this.$bucket.state.id
// ...
// accessing name state in the nested tree
this.$bucket.state.module1.name
},
declare states inside your bucket (index.js):
import { createBucket } from "v-bucket";
const bucket = createBucket({
states: {
id: 1,
name: "mahdi",
phone: 120304
},
mutations: {
// your mutations here
},
getters: {
// your getters here
},
modules: {
// your modules here
}
});
export default bucket;
NOTE: states object will be reactive by default. that means they will react to changes and update based on it.
NOTE: it's better to use mutations or getters to access states.
use mutations when you need to change a state value, all mutations will take 2 parameter:
const bucket = createBucket({
mutations: {
SET_ID(state, payload)
},
});
with state, you can have access to states object and change its value by passing payload.
NOTE: payload is optional.
const bucket = createBucket({
states: {
id: 0,
count: 0
}
mutations: {
SET_ID(state, payload) {
// changing id value
state.id = payload
}
COUNT_UP(state) {
// without payload
state.count++;
}
},
});
you can't access mutations directly. you have to call them with commit method. like this:
methods: {
click() {
this.$bucket.commit("SET_ID", 5);
this.$bucket.state.id // must be 5 now!
// ...
this.$bucket.commit("SET_ID"); // calling without a payload
}
}
you can use getters to access states and their values. getters are like Vue computed methods, they will cache the state and return it only when the state value change.
const bucket = createBucket({
states: {
id: 0,
name: "mahdi",
phone: 893729837
}
getters: {
GET_ID(state) {
return state.id
}
},
});
all getters will take 1 parameter:
using it in your vue app:
methods: {
click() {
this.$bucket.getters["GET_ID"] // will return id state
// ...
}
}
Actions are like mutations. the difference is:
const bucket = createBucket({
states: {
count: 0
}
mutations: {
increment(state) {
state.count++
}
},
actions: {
increment(context) {
context.commit("increment");
}
// or using argument destructuring to simplify the code.
anotherAction({ commit }) {
// do some action!
commit("someMutation");
}
}
});
also you can call other actions with context.dispatch. like this:
const bucket = createBucket({
actions: {
actionOne(context) {
context.commit("someMutation");
}
actionTwo(context) {
context.dispatch("actionOne"); // dispatching actionOne from another action!
}
}
});
also you can't access actions directly. you have to call them with dispatch method. like this:
methods: {
click() {
this.$bucket.dispatch("increment") // will call increment action
// ...
}
}
the context parameter will return root istance of our bucket. this is useful when working with modules.
from vuex docs:
const moduleA = {
states: { ... },
mutations: { ... },
actions: { ... },
modules: { ... }
}
const moduleB = {
states: { ... },
mutations: { ... },
actions: { ... },
modules: { ... }
}
const bucket = createBucket({
modules: {
// register modules
moduleA,
moduleB
}
});
bucket.state.moduleA // `moduleA`'s state
bucket.state.moduleB // `moduleB`'s state
every modules also can have their own states, mutations, actions or even modules
all modules will be installed under the root module. so by accessing the root state you can also have access to its children. like this:
methods: {
click() {
this.$bucket.state.moduleA.name // `moduleA`'s name state
this.$bucket.state.moduleB.id // `moduleB`'s id state
// ...
}
}
if you remember we used bracket notation to access getters, you can access your module's getter by defining its path. like this:
methods: {
click() {
this.$bucket.getters["moduleA/get_id"]; // `moduleA`'s getter
this.$bucket.getters["moduleB/get_name]; // `moduleB`'s name state
// you can go deep as many levels as you want
this.$bucket.getters["moduleA/moduleB/moduleC/moduleH/...];
// ...
}
}
they above code represent something like this:
-root --moduleA --moduleB
mutations are like getters, you can access your module's mutation by defining its path. like this:
methods: {
click() {
this.$bucket.commit("moduleA/set_id"); // we can access mutations by commit()
this.$bucket.commit("moduleB/set_name); // we can access mutations by commit()
// ...
}
}
actions are like getters, you can access your module's actions by defining its path. like this:
methods: {
click() {
this.$bucket.dispatch("moduleA/set_id"); // we can access mutations by dispatch()
this.$bucket.dispatch("moduleB/set_name); // we can access mutations by dispatch()
// ...
}
}
sometimes you need to access another module's mutation or action within the current module
since the context parameter refer to the root module, you can access all of your modules by defining their path. like this:
// inside module a
const moduleA = {
actions: {
commitModuleB(context) {
context.commit("moduleB/set_name"); // commiting in module b from module a
}
dispatchModuleB(context) {
context.dispatch("moduleB/request"); // dispatching in module b from module a
}
dispatchRoot(context) {
context.dispatch("rootMutation") // dispatching in root from module a
}
}
};
NOTE: if you want to access a module from another module like example, you need to define your paths from root
Please make sure to read the Contributing Guide before making a pull request.
FAQs
📦 Fast, Simple, and Lightweight State Management for Vue 3.0 built with composition API, inspired by Vuex.
The npm package @mediv0/v-bucket receives a total of 2 weekly downloads. As such, @mediv0/v-bucket popularity was classified as not popular.
We found that @mediv0/v-bucket demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.