Vue-blick Super Simple State Management

Overview

vue-blick

Super Simple State Management

Installation

npm install vue-blick

Usage

  1. Create your store
// store/alert-store.js

import { create } from 'vue-blick'

export default create({
  message: 'Hello', // state

  get reversedMessage() { // computed fields/getters
    return this.message.split('').reverse().join('')
  },

  async setMessage(message) { // methods/actions
    // await fetch(...)
    this.message = message
  }
})
  1. Inside any component
alert! ">
<template>
  <div>alert: {{ message }}div>
  <div>reversed alert: {{ reversedMessage }}div>
 <button @click="setMessage('World')">alert!button>
template>

<script>
import alertStore from './store/alert-store'

export default {
  mixins: [ alertStore.map('message', 'reversedMessage', 'setMessage') ]
}
script>

Outside of vue templates

You can also access the raw observable state through store.state. Maybe you want to call a method from one store to another.

That's it!

You might also like...
SImple todo app made with Vue 3 and bootstrap 5

todo-list Simple todo list with 3 components just practicing vue basics live preview https://vuesimpletodo.netlify.app/ Project setup npm install Com

A simple crypto dashboard written in Vue.JS and Vuetify.

crypto-dashboard Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

A custom fork of Homer, the simple dashboard for your server
A custom fork of Homer, the simple dashboard for your server

HomerGX Demo • Getting started Light Mode Preview Dark Mode Preview Table of Contents Features over the original Getting started Configuration Custom

Clocks: simple site that allow you to save clocks from different timezones
Clocks: simple site that allow you to save clocks from different timezones

Clocks Clocks - simple site that allow you to save clocks from different timezones. Features Custom name for timezone Find timezone relative to your c

Authentication pages for a simple vue3 app

Vue 3 + Vite This app is built with Vue3 and Vite. Hosting This app is hosted on

A Simple Portfolio Template built with VueJS (Vite) + TailwindCss
A Simple Portfolio Template built with VueJS (Vite) + TailwindCss

Welcome to Designer-portfolio 👋 Spacial Credit goes to : @salmanwap A Simple Portfolio Template built with VueJS (Vite) + TailwindCss click here to s

A frontend SIMPLE Admin Interfaces, based on Vite + Vue3 + Antd + Typescript
A frontend SIMPLE Admin Interfaces, based on Vite + Vue3 + Antd + Typescript

Lightweight, pure, easy to use Vue3 admin interfaces.

🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Comments
  • TypeScript support?

    TypeScript support?

    Hi creator!

    Your library looks like what I need but my question is. is this already supported by TypeScript? I'm very thankful for your response and would like to know further about your project

    Cheers

    opened by irhamputra 1
  • Bump pathval from 1.1.0 to 1.1.1

    Bump pathval from 1.1.0 to 1.1.1

    Bumps pathval from 1.1.0 to 1.1.1.

    Release notes

    Sourced from pathval's releases.

    v1.1.1

    Fixes a security issue around prototype pollution.

    Commits
    • db6c3e3 chore: v1.1.1
    • 7859e0e Merge pull request #60 from deleonio/fix/vulnerability-prototype-pollution
    • 49ce1f4 style: correct rule in package.json
    • c77b9d2 fix: prototype pollution vulnerability + working tests
    • 49031e4 chore: remove very old nodejs
    • 57730a9 chore: update deps and tool configuration
    • a123018 Merge pull request #55 from chaijs/remove-lgtm
    • 07eb4a8 Delete MAINTAINERS
    • a0147cd Merge pull request #54 from astorije/patch-1
    • aebb278 Center repo name on README
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by chai, a new releaser for pathval since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump glob-parent from 5.1.0 to 5.1.2

    Bump glob-parent from 5.1.0 to 5.1.2

    Bumps glob-parent from 5.1.0 to 5.1.2.

    Release notes

    Sourced from glob-parent's releases.

    v5.1.2

    Bug Fixes

    v5.1.1

    Bug Fixes

    Changelog

    Sourced from glob-parent's changelog.

    5.1.2 (2021-03-06)

    Bug Fixes

    6.0.0 (2021-05-03)

    ⚠ BREAKING CHANGES

    • Correct mishandled escaped path separators (#34)
    • upgrade scaffold, dropping node <10 support

    Bug Fixes

    • Correct mishandled escaped path separators (#34) (32f6d52), closes #32

    Miscellaneous Chores

    • upgrade scaffold, dropping node <10 support (e83d0c5)

    5.1.1 (2021-01-27)

    Bug Fixes

    Commits
    • eb2c439 chore: update changelog
    • 12bcb6c chore: release 5.1.2
    • f923116 fix: eliminate ReDoS (#36)
    • 0b014a7 chore: add JSDoc returns information (#33)
    • 2b24ebd chore: generate initial changelog
    • 9b6e874 chore: release 5.1.1
    • 749c35e ci: try wrapping the JOB_ID in a string
    • 5d39def ci: attempt to switch to published coveralls
    • 0b5b37f ci: put the npm step back in for only Windows
    • 473f5d8 ci: update azure build images
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Michael
Web Developer and language enthusiast.
Michael
Vue-Admin: a vue+node.js backend management system

Vue-Admin: a vue+node.js backend management system

Sunshine 2 Sep 23, 2022
iView vue Admin / An admin management system template

iview-vue-admin iView Vue Admin Live Demo: https://tonyluo.github.io/iview-vue-admin Build Setup # install dependencies npm install # serve with hot

Tony 107 Aug 19, 2022
Finance Management System with Laravel 7 and Vue.js 2

Finance Management System with Laravel 7 & Vue.js Authentications Vue based components Server Side Searching Jquery DataTable with Vue.js Pagination S

Shahghasi Adil 1 Dec 25, 2022
Xornet is a server management dashboard like Grafana with an easy setup so you can manage your servers remotely!

Information We are XORNET this is a fun little project started by @Geoxor for people who have servers and don’t have shit to do with them, our goal is

Xornet 12 Oct 28, 2021
AKe-Vue3-Admin is a framework that quickly helps you build a back-end management panel.

AKe-Vue3-Admin is a framework that quickly helps you build a back-end management panel. You don't need to pay attention to the code implementation of layout, data processing, and interactive processing, but you only need to pay attention to common component development and interface configuration information adjustment. AKe-Vue3-Admin adopts Vue3.0 + Tailwind CSS + ant-design-vue 2.x + vite2.x

Mr.WuShuang 4 Dec 31, 2021
A simple Laravel 8 + Vue 2 + AdminLTE 3 based Curd Starter template for SPA ApplicationA simple Laravel 8 + Vue 2 + AdminLTE 3 based Curd Starter template for SPA Application

Laravel+Vue Crud Starter About Repository A very simple Laravel 8 + Vue 2 + AdminLTE 3 based Curd Starter template for SPA Application. Tech Specifica

Moiz Chauhdry 9 Apr 23, 2022
A dead simple but powerful vue admin with Vue CLI 3 and ElementUI.

Element Admin A dead simple but powerful vue admin with Vue CLI 3 and ElementUI. This project is built by a magic vue cli plugin - @codetrial/vue-cli-

null 36 Nov 24, 2022
A simple vue base template for admin system

Preview frog-admin Use: Element-ui ?? ECharts ?? VueRx ?? Project setup npm install Compiles and hot-reloads for development npm run serve Compi

null 24 Jul 16, 2022
A Simple Calculation App Built Using Vue.js

calculationapp Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

fumi 0 Dec 8, 2021
A Simple , Minimalist And Responsive User List Made With Vue 3 And Tailwind CSS

USER LIST WITH VUE 3 Simple , minimalist and responsive User list made with VUE 3 and TAILWIND ! LINK DEMO : https://userlist-khangltm.netlify.app SOU

null 8 Dec 10, 2022