Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soc221b/vuex-light
WARNING: This package is no longer to be maintained, use [Pinia](https://pinia.esm.dev/) instead.
https://github.com/soc221b/vuex-light
composition-api state-management typescript vue vue3 vuex
Last synced: 24 days ago
JSON representation
WARNING: This package is no longer to be maintained, use [Pinia](https://pinia.esm.dev/) instead.
- Host: GitHub
- URL: https://github.com/soc221b/vuex-light
- Owner: soc221b
- License: mit
- Archived: true
- Created: 2020-12-28T15:01:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-21T07:59:04.000Z (almost 3 years ago)
- Last Synced: 2024-06-17T05:27:44.419Z (3 months ago)
- Topics: composition-api, state-management, typescript, vue, vue3, vuex
- Language: TypeScript
- Homepage: https://iendeavor.github.io/vuex-light/vuex-light
- Size: 5.36 MB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
WARNING: This package is no longer to be maintained, use [Pinia](https://pinia.esm.dev/) instead.
# vuex-light
[](https://www.npmjs.com/package/vuex-light)
[](https://bundlephobia.com/result?p=vuex-light@latest)
[](https://github.com/iendeavor/vuex-light/actions?query=workflow%3ACI+branch%3Amain+)
## Why
Have you ever wanted to [have type-ahead feature or intelligense](https://github.com/vuejs/vuex/issues/564) when commit
a mutation or dispatch actions?
Have you want to use such a token which is saved in the store and you
[cannot inject `useStore` hook](https://github.com/vuejs/vuex/issues/1873) due to you aren't in setup lifecycle?
## Features
- :bulb: Better DX - consistent and intuitive interface
- :muscle: Robust typescript support
- VM agnostic - you can directly import and use it **anywhere**, no matter whether in `setup` lifecycle or not.
## Getting Started
### Setup
via npm
```
yarn add vuex-light
```
via cdn
```html
```
### Getting Started
Create the simplest store:
```ts
// ./store.ts
import { createStore } from 'vuex-light'
const store = createStore(
// state
{
count: 0,
},
// getters
{},
// mutations
{
increment({ state }) {
state.count++
},
},
)
export function useStore() {
return store
}
```
```html
Clicked: {{ store.state.count }} times.
+
import { defineComponent } from 'vue'
import { useStore } from './store'
export default defineComponent({
setup() {
const { state, mutations } = useStore()
return {
state,
mutations,
}
},
})
```
## API
### Core
```ts
const store = createStore(
// state
{
count: 0,
},
// getters
{
isOdd({ state, getters }) {
// ...
},
},
// mutations
{
increment({ state, getters, mutations }, ...payloads) {
// ...
},
},
// actions
{
incrementIfOdd({ state, getters, mutations, actions }, ...payloads) {
// ...
},
},
// modules
{
module: createStore(
// state
{
moduleCount: 0,
},
),
},
)
store.state.count
store.getters.isOdd
store.mutations.increment()
store.actions.incrementIfOdd()
store.modules.module.state.moduleCount
```
### Plugins
#### `createLoggerPlugin`
https://iendeavor.github.io/vuex-light/vuex-light.createloggerplugin.html
#### `createPersistPlugin`
https://iendeavor.github.io/vuex-light/vuex-light.createpersistplugin.html
## Contributing
Please read [CONTRIBUTING.md](/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull
requests to us.
### Versioning
We use [SemVer](https://semver.org/) for versioning. For the versions available, see the tags on this repository.
## License
This project is licensed under the MIT License - see the [LICENSE](/LICENSE) file for details