Comparing version 0.0.2 to 0.1.0-alpha.0
/*! | ||
* pinia v0.0.2 | ||
* pinia v0.1.0-alpha.0 | ||
* (c) 2019 Eduardo San Martin Morote | ||
@@ -10,3 +10,3 @@ * @license MIT | ||
var compositionApi = require('@vue/composition-api'); | ||
var vue = require('vue'); | ||
@@ -56,3 +56,3 @@ /*! ***************************************************************************** | ||
var rootStore; | ||
function devtoolPlugin(store) { | ||
function useStoreDevtools(store) { | ||
if (!devtoolHook) | ||
@@ -126,8 +126,9 @@ return; | ||
if (getters === void 0) { getters = {}; } | ||
var state = compositionApi.ref(buildState()); | ||
var state = vue.ref(buildState()); | ||
var isListening = true; | ||
var subscriptions = []; | ||
compositionApi.watch(function () { return state.value; }, function (state) { | ||
vue.watch(function () { return state.value; }, function (state) { | ||
if (isListening) { | ||
subscriptions.forEach(function (callback) { | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
callback({ storeName: id, type: '🧩 in place', payload: {} }, state); | ||
@@ -142,6 +143,9 @@ }); | ||
isListening = false; | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
innerPatch(state.value, partialState); | ||
isListening = true; | ||
subscriptions.forEach(function (callback) { | ||
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, state.value); | ||
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state.value); | ||
}); | ||
@@ -155,2 +159,3 @@ } | ||
subscriptions = []; | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state.value = buildState(); | ||
@@ -161,2 +166,3 @@ } | ||
// it is replaced below by a getter | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state: state.value, | ||
@@ -172,3 +178,4 @@ patch: patch, | ||
// @ts-ignore | ||
computedGetters[getterName] = compositionApi.computed(function () { | ||
computedGetters[getterName] = vue.computed(function () { | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
return getters[getterName](state.value); | ||
@@ -186,2 +193,3 @@ }); | ||
isListening = false; | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state.value = newState; | ||
@@ -191,4 +199,2 @@ isListening = true; | ||
}); | ||
// Devtools injection hue hue | ||
devtoolPlugin(store); | ||
return store; | ||
@@ -214,2 +220,3 @@ } | ||
store = buildStore(id, buildState, getters); | ||
useStoreDevtools(store); | ||
return store; | ||
@@ -216,0 +223,0 @@ }; |
/*! | ||
* pinia v0.0.2 | ||
* pinia v0.1.0-alpha.0 | ||
* (c) 2019 Eduardo San Martin Morote | ||
* @license MIT | ||
*/ | ||
import { ref, watch, computed } from '@vue/composition-api'; | ||
import { ref, watch, computed } from 'vue'; | ||
@@ -51,3 +51,3 @@ /*! ***************************************************************************** | ||
var rootStore; | ||
function devtoolPlugin(store) { | ||
function useStoreDevtools(store) { | ||
if (!devtoolHook) | ||
@@ -127,2 +127,3 @@ return; | ||
subscriptions.forEach(function (callback) { | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
callback({ storeName: id, type: '🧩 in place', payload: {} }, state); | ||
@@ -137,6 +138,9 @@ }); | ||
isListening = false; | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
innerPatch(state.value, partialState); | ||
isListening = true; | ||
subscriptions.forEach(function (callback) { | ||
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, state.value); | ||
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state.value); | ||
}); | ||
@@ -150,2 +154,3 @@ } | ||
subscriptions = []; | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state.value = buildState(); | ||
@@ -156,2 +161,3 @@ } | ||
// it is replaced below by a getter | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state: state.value, | ||
@@ -168,2 +174,3 @@ patch: patch, | ||
computedGetters[getterName] = computed(function () { | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
return getters[getterName](state.value); | ||
@@ -181,2 +188,3 @@ }); | ||
isListening = false; | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state.value = newState; | ||
@@ -186,4 +194,2 @@ isListening = true; | ||
}); | ||
// Devtools injection hue hue | ||
devtoolPlugin(store); | ||
return store; | ||
@@ -209,2 +215,3 @@ } | ||
store = buildStore(id, buildState, getters); | ||
useStoreDevtools(store); | ||
return store; | ||
@@ -211,0 +218,0 @@ }; |
/*! | ||
* pinia v0.0.2 | ||
* pinia v0.1.0-alpha.0 | ||
* (c) 2019 Eduardo San Martin Morote | ||
* @license MIT | ||
*/ | ||
import{ref as t,watch as e,computed as n}from"@vue/composition-api"; | ||
import{ref as t,watch as e,computed as n}from"vue"; | ||
/*! ***************************************************************************** | ||
@@ -20,2 +20,2 @@ Copyright (c) Microsoft Corporation. All rights reserved. | ||
and limitations under the License. | ||
***************************************************************************** */var o=function(){return(o=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var u in e=arguments[n])Object.prototype.hasOwnProperty.call(e,u)&&(t[u]=e[u]);return t}).apply(this,arguments)};function u(t){return t&&"object"==typeof t&&"[object Object]"===Object.prototype.toString.call(t)&&"function"!=typeof t.toJSON}var i,r=("undefined"!=typeof window?window:"undefined"!=typeof global?global:{__VUE_DEVTOOLS_GLOBAL_HOOK__:void 0}).__VUE_DEVTOOLS_GLOBAL_HOOK__;function a(a,c,f){void 0===f&&(f={});var s=t(c()),p=!0,l=[];e((function(){return s.value}),(function(t){p&&l.forEach((function(e){e({storeName:a,type:"🧩 in place",payload:{}},t)}))}),{deep:!0,flush:"sync"});var d={id:a,state:s.value,patch:function(t){p=!1,function t(e,n){for(var o in n){var i=n[o],r=e[o];u(r)&&u(i)?e[o]=t(r,i):e[o]=i}return e}(s.value,t),p=!0,l.forEach((function(e){e({storeName:a,type:"⤵️ patch",payload:t},s.value)}))},subscribe:function(t){l.push(t)},reset:function(){l=[],s.value=c()}},v={},_=function(t){f[t];v[t]=n((function(){return f[t](s.value)}))};for(var m in f)_(m);var O=o(o({},d),v);return Object.defineProperty(O,"state",{get:function(){return s.value},set:function(t){p=!1,s.value=t,p=!0}}),function(t){r&&(i||(i={_devtoolHook:r,_vm:{$options:{computed:{}}},_mutations:{},_modulesNamespaceMap:{},_modules:{get:function(t){return t in i._modulesNamespaceMap}},state:{},replaceState:function(){},registerModule:function(){},unregisterModule:function(){}},r.emit("vuex:init",i)),i.state[t.id]=t.state,i.registerModule(t.id,t),Object.defineProperty(i.state,t.id,{get:function(){return t.state},set:function(e){return t.state=e}}),i._modulesNamespaceMap[t.id+"/"]=!0,r.on("vuex:travel-to-state",(function(e){t.state=e[t.id]})),t.subscribe((function(e,n){i.state[t.id]=n,r.emit("vuex:mutation",o(o({},e),{type:"["+e.storeName+"] "+e.type}),i.state)})))}(O),O}function c(t,e,n){var o;return void 0===n&&(n={}),function(u){return void 0===u&&(u=!1),o&&!u||(o=a(t,e,n)),o}}export{c as createStore}; | ||
***************************************************************************** */var o=function(){return(o=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var u in e=arguments[n])Object.prototype.hasOwnProperty.call(e,u)&&(t[u]=e[u]);return t}).apply(this,arguments)};function u(t){return t&&"object"==typeof t&&"[object Object]"===Object.prototype.toString.call(t)&&"function"!=typeof t.toJSON}var r,i=("undefined"!=typeof window?window:"undefined"!=typeof global?global:{__VUE_DEVTOOLS_GLOBAL_HOOK__:void 0}).__VUE_DEVTOOLS_GLOBAL_HOOK__;function a(r,i,a){void 0===a&&(a={});var c=t(i()),f=!0,s=[];e((function(){return c.value}),(function(t){f&&s.forEach((function(e){e({storeName:r,type:"🧩 in place",payload:{}},t)}))}),{deep:!0,flush:"sync"});var p={id:r,state:c.value,patch:function(t){f=!1,function t(e,n){for(var o in n){var r=n[o],i=e[o];u(i)&&u(r)?e[o]=t(i,r):e[o]=r}return e}(c.value,t),f=!0,s.forEach((function(e){e({storeName:r,type:"⤵️ patch",payload:t},c.value)}))},subscribe:function(t){s.push(t)},reset:function(){s=[],c.value=i()}},l={},d=function(t){a[t];l[t]=n((function(){return a[t](c.value)}))};for(var v in a)d(v);var _=o(o({},p),l);return Object.defineProperty(_,"state",{get:function(){return c.value},set:function(t){f=!1,c.value=t,f=!0}}),_}function c(t,e,n){var u;return void 0===n&&(n={}),function(c){return void 0===c&&(c=!1),u&&!c||(u=a(t,e,n)),function(t){i&&(r||(r={_devtoolHook:i,_vm:{$options:{computed:{}}},_mutations:{},_modulesNamespaceMap:{},_modules:{get:function(t){return t in r._modulesNamespaceMap}},state:{},replaceState:function(){},registerModule:function(){},unregisterModule:function(){}},i.emit("vuex:init",r)),r.state[t.id]=t.state,r.registerModule(t.id,t),Object.defineProperty(r.state,t.id,{get:function(){return t.state},set:function(e){return t.state=e}}),r._modulesNamespaceMap[t.id+"/"]=!0,i.on("vuex:travel-to-state",(function(e){t.state=e[t.id]})),t.subscribe((function(e,n){r.state[t.id]=n,i.emit("vuex:mutation",o(o({},e),{type:"["+e.storeName+"] "+e.type}),r.state)})))}(u),u}}export{c as createStore}; |
/*! | ||
* pinia v0.0.2 | ||
* pinia v0.1.0-alpha.0 | ||
* (c) 2019 Eduardo San Martin Morote | ||
* @license MIT | ||
*/ | ||
var Pinia = (function (exports, compositionApi) { | ||
var Pinia = (function (exports, vue) { | ||
'use strict'; | ||
@@ -52,3 +52,3 @@ | ||
var rootStore; | ||
function devtoolPlugin(store) { | ||
function useStoreDevtools(store) { | ||
if (!devtoolHook) | ||
@@ -122,8 +122,9 @@ return; | ||
if (getters === void 0) { getters = {}; } | ||
var state = compositionApi.ref(buildState()); | ||
var state = vue.ref(buildState()); | ||
var isListening = true; | ||
var subscriptions = []; | ||
compositionApi.watch(function () { return state.value; }, function (state) { | ||
vue.watch(function () { return state.value; }, function (state) { | ||
if (isListening) { | ||
subscriptions.forEach(function (callback) { | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
callback({ storeName: id, type: '🧩 in place', payload: {} }, state); | ||
@@ -138,6 +139,9 @@ }); | ||
isListening = false; | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
innerPatch(state.value, partialState); | ||
isListening = true; | ||
subscriptions.forEach(function (callback) { | ||
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, state.value); | ||
callback({ storeName: id, type: '⤵️ patch', payload: partialState }, | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state.value); | ||
}); | ||
@@ -151,2 +155,3 @@ } | ||
subscriptions = []; | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state.value = buildState(); | ||
@@ -157,2 +162,3 @@ } | ||
// it is replaced below by a getter | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state: state.value, | ||
@@ -168,3 +174,4 @@ patch: patch, | ||
// @ts-ignore | ||
computedGetters[getterName] = compositionApi.computed(function () { | ||
computedGetters[getterName] = vue.computed(function () { | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
return getters[getterName](state.value); | ||
@@ -182,2 +189,3 @@ }); | ||
isListening = false; | ||
// @ts-ignore FIXME: why is this even failing on TS | ||
state.value = newState; | ||
@@ -187,4 +195,2 @@ isListening = true; | ||
}); | ||
// Devtools injection hue hue | ||
devtoolPlugin(store); | ||
return store; | ||
@@ -210,2 +216,3 @@ } | ||
store = buildStore(id, buildState, getters); | ||
useStoreDevtools(store); | ||
return store; | ||
@@ -219,2 +226,2 @@ }; | ||
}({}, VueCompositionApi)); | ||
}({}, vue)); |
/*! | ||
* pinia v0.0.2 | ||
* pinia v0.1.0-alpha.0 | ||
* (c) 2019 Eduardo San Martin Morote | ||
@@ -20,2 +20,2 @@ * @license MIT | ||
and limitations under the License. | ||
***************************************************************************** */var n=function(){return(n=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var u in e=arguments[n])Object.prototype.hasOwnProperty.call(e,u)&&(t[u]=e[u]);return t}).apply(this,arguments)};function o(t){return t&&"object"==typeof t&&"[object Object]"===Object.prototype.toString.call(t)&&"function"!=typeof t.toJSON}var u,r=("undefined"!=typeof window?window:"undefined"!=typeof global?global:{__VUE_DEVTOOLS_GLOBAL_HOOK__:void 0}).__VUE_DEVTOOLS_GLOBAL_HOOK__;function i(t,i,a){void 0===a&&(a={});var c=e.ref(i()),f=!0,s=[];e.watch((function(){return c.value}),(function(e){f&&s.forEach((function(n){n({storeName:t,type:"🧩 in place",payload:{}},e)}))}),{deep:!0,flush:"sync"});var p={id:t,state:c.value,patch:function(e){f=!1,function t(e,n){for(var u in n){var r=n[u],i=e[u];o(i)&&o(r)?e[u]=t(i,r):e[u]=r}return e}(c.value,e),f=!0,s.forEach((function(n){n({storeName:t,type:"⤵️ patch",payload:e},c.value)}))},subscribe:function(t){s.push(t)},reset:function(){s=[],c.value=i()}},d={},l=function(t){a[t];d[t]=e.computed((function(){return a[t](c.value)}))};for(var v in a)l(v);var _=n(n({},p),d);return Object.defineProperty(_,"state",{get:function(){return c.value},set:function(t){f=!1,c.value=t,f=!0}}),function(t){r&&(u||(u={_devtoolHook:r,_vm:{$options:{computed:{}}},_mutations:{},_modulesNamespaceMap:{},_modules:{get:function(t){return t in u._modulesNamespaceMap}},state:{},replaceState:function(){},registerModule:function(){},unregisterModule:function(){}},r.emit("vuex:init",u)),u.state[t.id]=t.state,u.registerModule(t.id,t),Object.defineProperty(u.state,t.id,{get:function(){return t.state},set:function(e){return t.state=e}}),u._modulesNamespaceMap[t.id+"/"]=!0,r.on("vuex:travel-to-state",(function(e){t.state=e[t.id]})),t.subscribe((function(e,o){u.state[t.id]=o,r.emit("vuex:mutation",n(n({},e),{type:"["+e.storeName+"] "+e.type}),u.state)})))}(_),_}return t.createStore=function(t,e,n){var o;return void 0===n&&(n={}),function(u){return void 0===u&&(u=!1),o&&!u||(o=i(t,e,n)),o}},t}({},VueCompositionApi); | ||
***************************************************************************** */var n=function(){return(n=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var u in e=arguments[n])Object.prototype.hasOwnProperty.call(e,u)&&(t[u]=e[u]);return t}).apply(this,arguments)};function o(t){return t&&"object"==typeof t&&"[object Object]"===Object.prototype.toString.call(t)&&"function"!=typeof t.toJSON}var u,r=("undefined"!=typeof window?window:"undefined"!=typeof global?global:{__VUE_DEVTOOLS_GLOBAL_HOOK__:void 0}).__VUE_DEVTOOLS_GLOBAL_HOOK__;function i(t,u,r){void 0===r&&(r={});var i=e.ref(u()),a=!0,c=[];e.watch((function(){return i.value}),(function(e){a&&c.forEach((function(n){n({storeName:t,type:"🧩 in place",payload:{}},e)}))}),{deep:!0,flush:"sync"});var f={id:t,state:i.value,patch:function(e){a=!1,function t(e,n){for(var u in n){var r=n[u],i=e[u];o(i)&&o(r)?e[u]=t(i,r):e[u]=r}return e}(i.value,e),a=!0,c.forEach((function(n){n({storeName:t,type:"⤵️ patch",payload:e},i.value)}))},subscribe:function(t){c.push(t)},reset:function(){c=[],i.value=u()}},s={},p=function(t){r[t];s[t]=e.computed((function(){return r[t](i.value)}))};for(var d in r)p(d);var l=n(n({},f),s);return Object.defineProperty(l,"state",{get:function(){return i.value},set:function(t){a=!1,i.value=t,a=!0}}),l}return t.createStore=function(t,e,o){var a;return void 0===o&&(o={}),function(c){return void 0===c&&(c=!1),a&&!c||(a=i(t,e,o)),function(t){r&&(u||(u={_devtoolHook:r,_vm:{$options:{computed:{}}},_mutations:{},_modulesNamespaceMap:{},_modules:{get:function(t){return t in u._modulesNamespaceMap}},state:{},replaceState:function(){},registerModule:function(){},unregisterModule:function(){}},r.emit("vuex:init",u)),u.state[t.id]=t.state,u.registerModule(t.id,t),Object.defineProperty(u.state,t.id,{get:function(){return t.state},set:function(e){return t.state=e}}),u._modulesNamespaceMap[t.id+"/"]=!0,r.on("vuex:travel-to-state",(function(e){t.state=e[t.id]})),t.subscribe((function(e,o){u.state[t.id]=o,r.emit("vuex:mutation",n(n({},e),{type:"["+e.storeName+"] "+e.type}),u.state)})))}(a),a}},t}({},vue); |
import { StateTree, Store } from './types'; | ||
export declare function devtoolPlugin(store: Store<string, StateTree>): void; | ||
export declare function useStoreDevtools(store: Store<string, StateTree>): void; |
@@ -6,3 +6,3 @@ import { StateTree, Store, StoreGetters, StoreGetter } from './types'; | ||
*/ | ||
declare type CombinedStore<Id extends string, S extends StateTree, G extends Record<string, StoreGetter<S>>> = Store<Id, S> & StoreGetters<S, G>; | ||
export declare type CombinedStore<Id extends string, S extends StateTree, G extends Record<string, StoreGetter<S>>> = Store<Id, S> & StoreGetters<S, G>; | ||
/** | ||
@@ -26,2 +26,1 @@ * Creates a store instance | ||
export declare function createStore<Id extends string, S extends StateTree, G extends Record<string, StoreGetter<S>>>(id: Id, buildState: () => S, getters?: G): (forceNewStore?: boolean) => CombinedStore<Id, S, G>; | ||
export {}; |
@@ -1,2 +0,2 @@ | ||
import { Ref } from '@vue/composition-api'; | ||
import { Ref } from 'vue'; | ||
interface JSONSerializable { | ||
@@ -3,0 +3,0 @@ toJSON(): string; |
{ | ||
"name": "pinia", | ||
"version": "0.0.2", | ||
"version": "0.1.0-alpha.0", | ||
"description": "Some awesome description", | ||
@@ -34,3 +34,16 @@ "main": "dist/pinia.common.js", | ||
}, | ||
"keywords": [], | ||
"keywords": [ | ||
"vue", | ||
"vuex", | ||
"store", | ||
"pina", | ||
"composition", | ||
"api", | ||
"setup", | ||
"typed", | ||
"typescript", | ||
"ts", | ||
"type", | ||
"safe" | ||
], | ||
"license": "MIT", | ||
@@ -40,8 +53,7 @@ "devDependencies": { | ||
"@rollup/plugin-replace": "^2.2.1", | ||
"@types/jest": "^24.0.18", | ||
"@typescript-eslint/eslint-plugin": "^2.3.1", | ||
"@typescript-eslint/parser": "^2.3.1", | ||
"@vue/composition-api": "^0.3.2", | ||
"@types/jest": "^24.0.24", | ||
"@typescript-eslint/eslint-plugin": "^2.12.0", | ||
"@typescript-eslint/parser": "^2.12.0", | ||
"codecov": "^3.6.1", | ||
"eslint": "^6.4.0", | ||
"eslint": "^6.8.0", | ||
"eslint-config-prettier": "^6.3.0", | ||
@@ -60,5 +72,4 @@ "eslint-plugin-prettier": "^3.1.1", | ||
"tsd": "^0.11.0", | ||
"typescript": "^3.6.3", | ||
"vue": "^2.6.10", | ||
"vue-server-renderer": "^2.6.10" | ||
"typescript": "^3.7.4", | ||
"vue": "next" | ||
}, | ||
@@ -65,0 +76,0 @@ "repository": { |
@@ -5,11 +5,11 @@ # Pinia [![Build Status](https://badgen.net/circleci/github/posva/pinia/master)](https://circleci.com/gh/posva/pinia) [![npm package](https://badgen.net/npm/v/pinia)](https://www.npmjs.com/package/pinia) [![coverage](https://badgen.net/codecov/c/github/posva/pinia/master)](https://codecov.io/github/posva/pinia) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks) | ||
> | ||
> _Piña_ is also an invalid package name... | ||
> _Piña_ is also an invalid package name... that's why it has to be _pinia_ | ||
🍍Type Safe Modular and lightweight (but **Experimental**) Store for Vue based on the composition api | ||
🍍Automatically Typed, Modular and lightweight (but **Experimental**) Store for Vue based on the composition api with devtools support | ||
Demo (TODO link) | ||
⚠⚠⚠ This project is experimental, it's an exploration of whan a _Store_ could be like using [the composition api](https://vue-composition-api-rfc.netlify.com). It works for Vue 2 by using the [official library](https://github.com/vuejs/composition-api). | ||
⚠️⚠️⚠️ This project is experimental, it's an exploration of what a _Store_ could be like using [the composition api](https://vue-composition-api-rfc.netlify.com). It works for Vue 2 by using the [official library](https://github.com/vuejs/composition-api). | ||
What I want is to maybe inspire others to think about ways to improve Vuex. | ||
What I want is to inspire others to think about ways to improve Vuex and come up with something that works very well with the composition api but that can also be used **without it**. | ||
@@ -19,9 +19,29 @@ There are the core principles that I try to achieve with this experiment: | ||
- Flat modular structure 🍍 No nesting, only stores, compose them as needed | ||
- Light layer on top of Vue 💨 keep it under 1kg gzip | ||
- Light layer on top of Vue 💨 keep it under 1kb gzip | ||
- Only `state` and `getters` 👐 `patch` is the new _mutation_ | ||
- Actions are just functions ⚗️ Group your business there | ||
- import what you need, let webpack code split 📦 And you won't need modules! | ||
- Import what you need, let webpack code split 📦 No need for dynamically registered modules | ||
- SSR support ⚙️ | ||
- DevTools support 💻 Which is crucial to make this enjoyable | ||
**Help me keep working on Open Source in a sustainable way 🚀**. Help me with as little as \$1 a month, [sponsor me on Github](https://github.com/sponsors/posva). | ||
<h3 align="center">Silver Sponsors</h3> | ||
<p align="center"> | ||
<a href="https://www.vuemastery.com" title="Vue Mastery" target="_blank"> | ||
<img src="https://www.vuemastery.com/images/lgo-vuemastery.svg" alt="Vue Mastery logo" height="48px"> | ||
</a> | ||
</p> | ||
<h3 align="center">Bronze Sponsors</h3> | ||
<p align="center"> | ||
<a href="https://vuetifyjs.com" target="_blank" title="Vuetify"> | ||
<img src="https://vuejs.org/images/vuetify.png" height="32px"> | ||
</a> | ||
</p> | ||
--- | ||
## FAQ | ||
@@ -100,3 +120,3 @@ | ||
**There is one important rule for this to work**: the `useMainStore` (or any other _useStore_ function) must be called inside of deffered functions. This is to allow the Vue Composition API plugin to be installed. \*\*Never, ever call `useStore` like this: | ||
**There is one important rule for this to work**: the `useMainStore` (or any other _useStore_ function) must be called inside of deferred functions. This is to allow the Vue Composition API plugin to be installed. **Never, ever call `useStore`** like this: | ||
@@ -143,3 +163,3 @@ ```ts | ||
main.patch({ | ||
counter; -1, | ||
counter: -1, | ||
name: 'Abalam', | ||
@@ -244,2 +264,36 @@ }) | ||
#### Creating _Pinias_ | ||
_Not implemented_. Replaces the examles above about combining state and getters and about composing stores. | ||
Combine multiple _stores_ (gajos) into a new one: | ||
```ts | ||
import { pinia } from 'pinia' | ||
import { useUserStore } from './user' | ||
import { useCartStore, emptyCart } from './cart' | ||
export const useCartUserStore = pinia( | ||
{ | ||
user: useUserStore, | ||
cart: useCartStore, | ||
}, | ||
{ | ||
combinedGetter: state => | ||
`Hi ${user.state.name}, you have ${cart.state.list.length} items in your cart. It costs ${cart.price}.`, | ||
} | ||
) | ||
export async function orderCart() { | ||
const store = useCartUserStore() | ||
try { | ||
await apiOrderCart(store.state.user.token, store.state.cart.items) | ||
emptyCart() | ||
} catch (err) { | ||
displayError(err) | ||
} | ||
} | ||
``` | ||
## Related | ||
@@ -246,0 +300,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
47249
22
13
768
299