Click here for the Japanese README.
vue-component-data-helper-mixin | Vue | Vuex | remarks |
---|---|---|---|
v0.x | v2.7.x | v3.x | |
v1.x | v3.x | v4.x |
- Creating a screen using Vuex Store requires the creation of the following boilerplate.
- getters for data acquisition
- actions, mutations for data setup
- A small amount can be managed, but when the number of items is large, management becomes complicated.
- It was created to avoid complicated management and to simply reflect/configure Store State values to screen items.
- Store State items can be bound directly to screen components with data.
- It can be bound to the hierarchical structure of Store State.
- Provide reactive change operations for Store State.
- Optionally, the display state can be defined for an item, and the state value can be freely used in screen components.
- The display state values inherit the upper values (separate implementation is required to use the set values in light of the upper values and the current values).
No | Name | Type | Description | Remarks |
---|---|---|---|---|
1 | StoreBindMixin | vue mixin | Component mixin that associates a store state with an input item. | Assumed to be set in the input single-item component. |
2 | StorePathMixin | vue mixin | Set the store state path of the item referenced by StoreBindMixin . |
Assume that StoreBindMixin is set to a bundling component. |
3 | StorePath | vue component | Single component without custom StorePathMixin . |
|
4 | setStoreState | method | Mutation method to be set when setting storeData in StoreBindMixin . |
Set to root store mutation. |
5 | StateSetPayload | type | Payload of setStoreState set to mutation. |
The data type of viewState can be specified using generics. |
6 | ViewStateTree | type | tree data type of viewState to be set for store state. | The data type of viewState can be specified using generics. |
7 | DataBinderInfo | type | Databinding information inherited from StorePathMixin . |
Custom StorePathMixin when taking over ViewState. |
Bind the Store State value to a simple input text item.
npm install vue-component-data-helper-mixin
- Define the data to be data bound.
- Set
setStoreState
to mutations.
import Vue from 'vue';
import Vuex from 'vuex';
import { setStoreState } from 'vue-component-data-helper-mixin';
Vue.use(Vuex);
export default new Vuex.Store({
state: () => ({
// -- 1 -- Set "data.card1"
data: {
card1: 'card1Value',
},
}),
mutations: {
// -- 2 --
setStoreState,
},
});
The component to be created here is TextBindComp.vue.
- Set
StoreBindMixin
to the component. - Set the mixin calculation property storeData to a screen item.
<template>
<!-- 2 -->
<input type="text" class="txt" v-model="storeData" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { StoreBindMixin } from 'vue-component-data-helper-mixin';
export default defineComponent({
name: 'TextBindComp',
// -- 1 --
mixins: [StoreBindMixin],
});
</script>
- Apply the
StorePath
path configuration component. - Apply the TextBindComp.vue you created.
- Set
StorePath
to dataPath. - Set mId to TextBindComp(StoreBindMixin).
<template>
<div>
<!-- 3 -->
<store-path m-data="data">
<!-- 4 -- TextBindComp refers to the value of "data.card1" -->
<text-bind-comp m-id="card1" />
</store-path>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { StorePath } from 'vue-component-data-helper-mixin';
import TextBindComp from './TextBindComp.vue';
export default defineComponent({
name: 'TextBindComp',
components: {
// -- 1 --
StorePath,
// -- 2 --
TextBindComp,
},
});
</script>
<div>
<div>
<!-- input value = 'card1Value' (from $store.state.data.card1 ) -->
<input type="text" class="txt" />
</div>
</div>
See example.
Copyright (c) 2022 BizLink Co.,Ltd.