Comments (11)
Hi, everyone, I created a vue-hooks repository and package.
It contains commonly used hooks (e.g: vuex
/ vue-router
).
Documentation has not been written yet, welcome everyone to contribute! 😄
from composition-api.
What do you think about https://github.com/zerobias/effector as a state manager?
Vue-function-api is the great thing with jsx =)
I thinking vuex doesn't need anymore =D
See:
// @app/core/hooks/use-value
import { value } from "vue-function-api"
export const useValue = (initialValue, lazy) => {
lazy = !!lazy
const state = value(initialValue)
const dispatch = (newValue) => {
if (!lazy) {
state.value = newValue
} else if (state.value !== newValue) {
state.value = newValue
}
}
const reset = () => dispatch(initialValue)
return [state, dispatch, reset]
}
// @app/core/hooks/use-reducer
import { useValue } from "./use-value"
export const useReducer = (reducer, initialValue, lazy) => {
const [state, set, reset] = useValue(initialValue, lazy)
const dispatch = (payload) => {
const reducerResult = reducer(state.value, payload)
set(reducerResult)
}
return [state, dispatch, reset]
}
Example:
import { useReducer } from "@app/core/hooks/use-reducer"
function reducer(value, payload) {
switch (payload.type) {
case "increment":
return value + 1
case "decrement":
return value - 1
default:
throw new Error()
}
}
export const ExampleCounter = {
setup() {
const initialValue = 0
const [count, updateCount, reset] = useReducer(reducer, initialValue)
const increment = () => updateCount({ type: "increment" })
const decrement = () => updateCount({ type: "decrement" })
// No needs, we have reset state function already
// const reset = () => updateCount({ type: "reset" })
return {
count,
increment,
decrement,
reset,
}
},
render(h) {
return (
<div>
Count: {this.counter.toString()}
<button vOn:click_prevent={this.increment}>+</button>
<button vOn:click_prevent={this.decrement}>-</button>
<button vOn:click_prevent={this.reset}>reset</button>
</div>
)
},
}
PS:
Example uses jsx - vue requires the next babel plugins for that
{
plugins: [
"@vue/babel-plugin-transform-vue-jsx",
"@vue/babel-sugar-v-on",
]
}
from composition-api.
@gianko Just like this:
/* hook-msg.js */
import {value as binding} from 'vue-function-api'
const msg = binding('hello world')
export default function useMsg () {
return {
msg,
}
}
/* comp-a.vue */
import useMsg from './hook-msg'
export default {
setup () {
const {msg} = useMsg()
return {
msg,
}
},
}
/* comp-b.vue */
import {computed} from 'vue-function-api'
import useMsg from './hook-msg'
export default {
setup () {
const {msg} = useMsg()
return {
msgUpperCased: computed(() => msg.value.toUpperCase()),
}
},
}
from composition-api.
@blowsie You need to call Vue.use()
first, before any composition api being used.
The missing entry file of my example:
/* main.js */
import Vue from 'vue'
import './use-composition-api'
import App from './app.vue'
new Vue({
render: h => h(App),
})
/* use-composition-api.js */
import Vue from 'vue'
import CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)
from composition-api.
see comment #8 (comment)
from composition-api.
Actually, after splitting states into hooks, I removed vuex from my project dependencies. 🤪
from composition-api.
@SilentDepth how are you sharing sharing vue-function-api
state between components?
care to share an example? please
from composition-api.
Thanks!... I was getting an error about using vue function api before calling the use plugin.
from composition-api.
I used the trick in the #8 answer but built on it a bit by making a small vuex plugin to do the wrapping of my getters.
Feels kind of hacky, but then all getters can be unpacked in one line
/* store-plugin.js */
import { computed } from 'vue-function-api'
let getters = {};
const myPlugin = store => {
Object.keys(store.getters)
.forEach(key => (getters[key] = computed(() => store.getters[key])));
}
export {
myPlugin,
getters
};
Then the computed getters can be accessed with:
/* some-vue-file.vue */
import { getters } from './store-plugin.vue';
const { someGetter, someOtherGetter } = getters;
from composition-api.
Duplicate of #8
from composition-api.
@SilentDepth i presume this example is not still relevant?
I tried to do the equivalent using ref and got an error Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function.
@gianko Just like this:
/* hook-msg.js */ import {value as binding} from 'vue-function-api' const msg = binding('hello world') export default function useMsg () { return { msg, } }/* comp-a.vue */ import useMsg from './hook-msg' export default { setup () { const {msg} = useMsg() return { msg, } }, }/* comp-b.vue */ import {computed} from 'vue-function-api' import useMsg from './hook-msg' export default { setup () { const {msg} = useMsg() return { msgUpperCased: computed(() => msg.value.toUpperCase()), } }, }
from composition-api.
Related Issues (20)
- Typing component refs HOT 2
- onMounted is called when there is no active component instance to be associated with HOT 7
- Variables created with ref in <templete>,do not automatically expand value HOT 4
- why setup run twice in vue2 HOT 8
- setup function provide a wrong prop type,when use type: Function HOT 3
- not work nice in web component, no error HOT 2
- How to avoid duplicate register composition-api ? HOT 1
- It doesn't work with nuxt 2 HOT 2
- watch 的回调如果发生错误,会一直触发调用 HOT 1
- ComponentRenderProxy类型与Vue不兼容,导致Ts编译报错 HOT 2
- vue2项目, 怎么在option API的基础上, 混用composition API? HOT 1
- render 函数中使用 web components 自定义标签,移除了HTML中原生的 slot 属性 HOT 3
- No support for Vue >= 2.7
- cdn方式引入导致vue devtools调试数据丢失 HOT 2
- 客户端使用vuecli 打包出来的commonjs模式的库,出现“Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any functio” HOT 2
- setup返回的data在development环境下会被expose到全局mixin的data中 HOT 2
- 是否有提供withDefaults?
- 安装时,报vue版本范围错误 HOT 2
- 【Bug】Memory Leak cause by toVue3ComponentInstance HOT 1
- 【BUG】watch() 传入reactive类型的数据,vue3.4与3.3表现不一致 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from composition-api.