https://github.com/lovetingyuan/vue-store
Simplified Vuex alternative for Vue
https://github.com/lovetingyuan/vue-store
Last synced: 4 months ago
JSON representation
Simplified Vuex alternative for Vue
- Host: GitHub
- URL: https://github.com/lovetingyuan/vue-store
- Owner: lovetingyuan
- Created: 2019-06-21T12:23:47.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-17T06:49:00.000Z (about 5 years ago)
- Last Synced: 2025-02-17T11:48:24.327Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 646 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-store
*still developing...*
[](https://www.npmjs.com/package/@tingyuan/vue-store)
a simpler way to use redux-like state management in vue project
* Simpler way to share and change your application state, NO ACTION_TYPE, commit, dispatch, helpers...
* Better and natural support for typescript
* Small size but with adequate support
### install
```bash
npm install @tingyuan/vue-store
```
or
```html
/* export "VueStore" as global name. */
```
### example
`store.ts`
```typescript
type Item = { text: string, done: boolean }
const todoModule = {
list: [] as Item[],
get doneCount() {
return this.list.filter(v => v.done).length
},
setList(list: Item[]) {
this.list = list
},
addItem(text: string) {
this.list.push({
text, done: false
})
},
async $fetchList() {
const list = await request('/api/get-list')
this.setList(list)
}
}
const modules = {
user: {
name: 'nobody'
},
setUserName(username: string) {
this.user.name = username
},
Todo: todoModule
}
import Vue from 'vue'
import VueStore from '@tingyuan/vue-store'
Vue.use(VueStore)
const store = VueStore.createStore(modules, {
strict: true,
plugins: [
store => {
store.subscribe(({ type, actionType, payload }, state) => {
if (type) {
console.log('mutation called: ' + type)
} else {
console.log('action called: ' + actionType)
}
})
}
]
})
export default store
```
```html
Hello {{$store.user.name}}, Todo List({{counter}})
- {{item.text}}
export default {
data() {
return { newItem: '' }
},
computed: {
todoList() { return this.$store.Todo.list },
counter() { return this.$store.Todo.doneCount + '/' + this.todoList.length }
},
methods: {
onAdd() {
this.newItem && this.$store.Todo.addItem(this.newItem)
}
},
created() {
this.$store.Todo.$fetchList()
}
}
.done { text-decoration: line-through; }
```
### declare `store` option
```typescript
import store from './store'
import Vue, { ComponentOptions } from 'vue'
declare module 'vue/types/options' {
interface ComponentOptions {
store?: typeof store
}
}
declare module 'vue/types/vue' {
interface Vue {
$store: typeof store
}
}
```
### api
* `store = VueStore.createStore(modules, options)`
* `store.watch(getter, callback)`
* `store.subscribe(listener, action)`
* `store.addModule(modulePath, module, options)`
* `store.replaceState(newState)`
* `store.getState(pure)`
* `store.hotUpdate(path, module)`
### convention(compulsory in fact)
1. name of sub-module(namespace) starts with **capital letter**
2. name of action method(with side-effect) starts with **'$'**
3. getter property will be taken as 'getters'