@vue-polkadot/vue-settings
v0.0.38-rc.13
Published
Polkadot Settings for KodaDot
Downloads
12
Readme
Installation
npm install --save @vue-polkadot/vue-settings
State Props
| Name | Description | | -------------- | ----------------------------- | | apiUrl | Selected Url | | i18nLang | Selected language | | locking | Selected Locking | | prefix | Prefix | | uiMode | UI Mode | | uiTheme | UI Theme | | avaibleOptions | Object of all avaible options |
Mutations
| Name | Description | Params | Types | | ----------- | ------------ | -------- | ----------------------- | | setSettings | Set settings | settings | SettingsStruct |
Getters
| Name | Description | Returns | | ------------------ | ----------------------------- | -------------- | | availableNodes | List of Nodes | Option[] | | availableLanguages | List of Languages | Option[] | | availableCryptos | List of Cryptographic modes | Option[] | | availableLocking | List of Locking | Option[] | | availablePrefixes | List of Prefixes | Option[] | | availableUiModes | List of UI Modes | Option[] | | availableUiThemes | List of UI Themes | Option[] | | getSettings | Object of all avaible options | SettingsStruct |
Usage Examples
import SettingModule
to your store as module
import Vue from 'vue'
import Vuex from 'vuex'
import SettingModule from '@vue-polkadot/vue-settings'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
setting: SettingModule,
},
})
now you can use getters and actions inside your component (Using Vue with typescript)
<template>
<div>
<div v-for="option in options">
<span>{{option.value}}</span>
<span>{{option.text}}</span>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class App extends Vue {
// Getter is like computed
get options(): Option[] {
return this.$store.getters.availableNodes
}
}
</script>