Can I use functional api with vuex? about composition-api HOT 11 CLOSED

// @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]
}

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>
    )
  },
}

{
  plugins: [
    "@vue/babel-plugin-transform-vue-jsx",
    "@vue/babel-sugar-v-on",
  ]
}

/* 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()),
    }
  },
}

/* 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)

/* 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
};

/* some-vue-file.vue */
import { getters } from './store-plugin.vue';

const { someGetter, someOtherGetter } = getters;