[build] 4.0.0-alpha.1

dist/vuex.common.js

@@ -1,44 +1,35 @@
 /**
- * vuex v3.1.3
+ * vuex v4.0.0-alpha.1
  * (c) 2020 Evan You
  * @license MIT
  */
 'use strict';
 
-function applyMixin (Vue) {
-  var version = Number(Vue.version.split('.')[0]);
+var vue = require('vue');
 
-  if (version >= 2) {
-    Vue.mixin({ beforeCreate: vuexInit });
-  } else {
-    // override init and inject vuex init procedure
-    // for 1.x backwards compatibility.
-    var _init = Vue.prototype._init;
-    Vue.prototype._init = function (options) {
-      if ( options === void 0 ) options = {};
-
-      options.init = options.init
-        ? [vuexInit].concat(options.init)
-        : vuexInit;
-      _init.call(this, options);
-    };
-  }
+var storeKey = 'store';
+
+function useStore (key) {
+  if ( key === void 0 ) key = null;
+
+  return vue.inject(key !== null ? key : storeKey)
+}
 
-  /**
-   * Vuex init hook, injected into each instances init hooks list.
-   */
-
-  function vuexInit () {
-    var options = this.$options;
-    // store injection
-    if (options.store) {
-      this.$store = typeof options.store === 'function'
-        ? options.store()
-        : options.store;
-    } else if (options.parent && options.parent.$store) {
-      this.$store = options.parent.$store;
+function applyMixin (app, store, injectKey) {
+  app.provide(injectKey || storeKey, store);
+
+  // TODO: Refactor this to use `provide/inject`. It's currently
+  // not possible because Vue 3 doesn't work with `$` prefixed
+  // `provide/inject` at the moment.
+  app.mixin({
+    beforeCreate: function beforeCreate () {
+      if (!this.parent) {
+        this.$store = typeof store === 'function' ? store() : store;
+      } else {
+        this.$store = this.parent.$options.$store;
+      }
     }
-  }
+  });
 }
 
 var target = typeof window !== 'undefined'
@@ -291,21 +282,28 @@ function makeAssertionMessage (path, key, type, value, expected) {
   return buf
 }
 
-var Vue; // bind on install
+// let Vue // bind on install
+
+function createStore (options) {
+  return new Store(options)
+}
 
 var Store = function Store (options) {
   var this$1 = this;
   if ( options === void 0 ) options = {};
 
+  // TODO: Bring back this one if needed.
+  //
   // Auto install if it is not done yet and `window` has `Vue`.
   // To allow users to avoid auto-installation in some cases,
   // this code should be placed here. See #731
-  if (!Vue && typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
-  }
+  // if (!Vue && typeof window !== 'undefined' && window.Vue) {
+  // install(window.Vue)
+  // }
 
   if (process.env.NODE_ENV !== 'production') {
-    assert(Vue, "must call Vue.use(Vuex) before creating a store instance.");
+    // TODO: Maybe we can remove this depending on the new implementation.
+    // assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
     assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");
     assert(this instanceof Store, "store must be called with the new operator.");
   }
@@ -322,7 +320,6 @@ var Store = function Store (options) {
   this._modules = new ModuleCollection(options);
   this._modulesNamespaceMap = Object.create(null);
   this._subscribers = [];
-  this._watcherVM = new Vue();
   this._makeLocalGettersCache = Object.create(null);
 
   // bind commit and dispatch to self
@@ -354,7 +351,7 @@ var Store = function Store (options) {
   // apply plugins
   plugins.forEach(function (plugin) { return plugin(this$1); });
 
-  var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
+  var useDevtools = options.devtools !== undefined ? options.devtools : /* Vue.config.devtools */ true;
   if (useDevtools) {
     devtoolPlugin(this);
   }
@@ -362,6 +359,23 @@ var Store = function Store (options) {
 
 var prototypeAccessors$1 = { state: { configurable: true } };
 
+Store.prototype.install = function install (app, injectKey) {
+  // TODO: Removing double install check for now. Maybe we can bring this
+  // feature back again if needed.
+  //
+  // if (Vue && _Vue === Vue) {
+  // if (process.env.NODE_ENV !== 'production') {
+  //   console.error(
+  //     '[vuex] already installed. Vue.use(Vuex) should be called only once.'
+  //   )
+  // }
+  // return
+  // }
+  // Vue = _Vue
+
+  applyMixin(app, this, injectKey);
+};
+
 prototypeAccessors$1.state.get = function () {
   return this._vm._data.$$state
 };
@@ -467,13 +481,13 @@ Store.prototype.subscribeAction = function subscribeAction (fn) {
   return genericSubscribe(subs, this._actionSubscribers)
 };
 
-Store.prototype.watch = function watch (getter, cb, options) {
+Store.prototype.watch = function watch$1 (getter, cb, options) {
     var this$1 = this;
 
   if (process.env.NODE_ENV !== 'production') {
     assert(typeof getter === 'function', "store.watch only accepts a function.");
   }
-  return this._watcherVM.$watch(function () { return getter(this$1.state, this$1.getters); }, cb, options)
+  return vue.watch(function () { return getter(this$1.state, this$1.getters); }, cb, Object.assign({}, options))
 };
 
 Store.prototype.replaceState = function replaceState (state) {
@@ -512,7 +526,7 @@ Store.prototype.unregisterModule = function unregisterModule (path) {
   this._modules.unregister(path);
   this._withCommit(function () {
     var parentState = getNestedState(this$1.state, path.slice(0, -1));
-    Vue.delete(parentState, path[path.length - 1]);
+    delete parentState[path[path.length - 1]];
   });
   resetStore(this);
 };
@@ -563,30 +577,42 @@ function resetStoreVM (store, state, hot) {
   // reset local getters cache
   store._makeLocalGettersCache = Object.create(null);
   var wrappedGetters = store._wrappedGetters;
-  var computed = {};
+  var computedObj = {};
   forEachValue(wrappedGetters, function (fn, key) {
+    // TODO: Refactor following code and comment. We can simplify many things
+    // using computed function.
+    //
     // use computed to leverage its lazy-caching mechanism
     // direct inline function use will lead to closure preserving oldVm.
     // using partial to return function with only arguments preserved in closure environment.
-    computed[key] = partial(fn, store);
+    computedObj[key] = partial(fn, store);
     Object.defineProperty(store.getters, key, {
-      get: function () { return store._vm[key]; },
+      get: function () { return vue.computed(function () { return computedObj[key](); }).value; },
       enumerable: true // for local getters
     });
   });
 
+  // TODO: Bring back this if it's still needed.
+  //
   // use a Vue instance to store the state tree
   // suppress warnings just in case the user has added
   // some funky global mixins
-  var silent = Vue.config.silent;
-  Vue.config.silent = true;
-  store._vm = new Vue({
-    data: {
+  // const silent = Vue.config.silent
+  // Vue.config.silent = true
+
+  // TODO: Refactor the code and remove this comment.
+  //
+  // New impl with reactive. Defining redundunt keys to make it as close as
+  // the old impl api.
+  store._vm = vue.reactive({
+    _data: {
       $$state: state
-    },
-    computed: computed
+    }
   });
-  Vue.config.silent = silent;
+
+  // TODO: Bring back maybe?
+  //
+  // Vue.config.silent = silent
 
   // enable strict mode for new vm
   if (store.strict) {
@@ -601,7 +627,8 @@ function resetStoreVM (store, state, hot) {
         oldVm._data.$$state = null;
       });
     }
-    Vue.nextTick(function () { return oldVm.$destroy(); });
+    // TODO: I think we don't need this anymore since we're not using vm?
+    // Vue.nextTick(() => oldVm.$destroy())
   }
 }
 
@@ -629,7 +656,7 @@ function installModule (store, rootState, path, module, hot) {
           );
         }
       }
-      Vue.set(parentState, moduleName, module.state);
+      parentState[moduleName] = module.state;
     });
   }
 
@@ -790,11 +817,11 @@ function registerGetter (store, type, rawGetter, local) {
 }
 
 function enableStrictMode (store) {
-  store._vm.$watch(function () { return this._data.$$state }, function () {
+  vue.watch(function () { return store._vm._data.$$state; }, function () {
     if (process.env.NODE_ENV !== 'production') {
       assert(store._committing, "do not mutate vuex store state outside mutation handlers.");
     }
-  }, { deep: true, sync: true });
+  }, { deep: true, flush: 'sync' });
 }
 
 function getNestedState (state, path) {
@@ -815,19 +842,6 @@ function unifyObjectStyle (type, payload, options) {
   return { type: type, payload: payload, options: options }
 }
 
-function install (_Vue) {
-  if (Vue && _Vue === Vue) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.error(
-        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
-      );
-    }
-    return
-  }
-  Vue = _Vue;
-  applyMixin(Vue);
-}
-
 /**
  * Reduce the code which written in Vue.js for getting the state.
  * @param {String} [namespace] - Module's namespace
@@ -1039,9 +1053,10 @@ function getModuleByNamespace (store, helper, namespace) {
 }
 
 var index = {
+  version: '4.0.0-alpha.1',
+  createStore: createStore,
   Store: Store,
-  install: install,
-  version: '3.1.3',
+  useStore: useStore,
   mapState: mapState,
   mapMutations: mapMutations,
   mapGetters: mapGetters,

dist/vuex.esm.browser.js

@@ -1,40 +1,31 @@
 /**
- * vuex v3.1.3
+ * vuex v4.0.0-alpha.1
  * (c) 2020 Evan You
  * @license MIT
  */
-function applyMixin (Vue) {
-  const version = Number(Vue.version.split('.')[0]);
-
-  if (version >= 2) {
-    Vue.mixin({ beforeCreate: vuexInit });
-  } else {
-    // override init and inject vuex init procedure
-    // for 1.x backwards compatibility.
-    const _init = Vue.prototype._init;
-    Vue.prototype._init = function (options = {}) {
-      options.init = options.init
-        ? [vuexInit].concat(options.init)
-        : vuexInit;
-      _init.call(this, options);
-    };
-  }
+import { inject, watch, computed, reactive } from 'vue';
+
+const storeKey = 'store';
 
-  /**
-   * Vuex init hook, injected into each instances init hooks list.
-   */
+function useStore (key = null) {
+  return inject(key !== null ? key : storeKey)
+}
 
-  function vuexInit () {
-    const options = this.$options;
-    // store injection
-    if (options.store) {
-      this.$store = typeof options.store === 'function'
-        ? options.store()
-        : options.store;
-    } else if (options.parent && options.parent.$store) {
-      this.$store = options.parent.$store;
+function applyMixin (app, store, injectKey) {
+  app.provide(injectKey || storeKey, store);
+
+  // TODO: Refactor this to use `provide/inject`. It's currently
+  // not possible because Vue 3 doesn't work with `$` prefixed
+  // `provide/inject` at the moment.
+  app.mixin({
+    beforeCreate () {
+      if (!this.parent) {
+        this.$store = typeof store === 'function' ? store() : store;
+      } else {
+        this.$store = this.parent.$options.$store;
+      }
     }
-  }
+  });
 }
 
 const target = typeof window !== 'undefined'
@@ -284,19 +275,26 @@ function makeAssertionMessage (path, key, type, value, expected) {
   return buf
 }
 
-let Vue; // bind on install
+// let Vue // bind on install
+
+function createStore (options) {
+  return new Store(options)
+}
 
 class Store {
   constructor (options = {}) {
+    // TODO: Bring back this one if needed.
+    //
     // Auto install if it is not done yet and `window` has `Vue`.
     // To allow users to avoid auto-installation in some cases,
     // this code should be placed here. See #731
-    if (!Vue && typeof window !== 'undefined' && window.Vue) {
-      install(window.Vue);
-    }
+    // if (!Vue && typeof window !== 'undefined' && window.Vue) {
+    //   install(window.Vue)
+    // }
 
     {
-      assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`);
+      // TODO: Maybe we can remove this depending on the new implementation.
+      // assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
       assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`);
       assert(this instanceof Store, `store must be called with the new operator.`);
     }
@@ -315,7 +313,6 @@ class Store {
     this._modules = new ModuleCollection(options);
     this._modulesNamespaceMap = Object.create(null);
     this._subscribers = [];
-    this._watcherVM = new Vue();
     this._makeLocalGettersCache = Object.create(null);
 
     // bind commit and dispatch to self
@@ -345,12 +342,29 @@ class Store {
     // apply plugins
     plugins.forEach(plugin => plugin(this));
 
-    const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
+    const useDevtools = options.devtools !== undefined ? options.devtools : /* Vue.config.devtools */ true;
     if (useDevtools) {
       devtoolPlugin(this);
     }
   }
 
+  install (app, injectKey) {
+    // TODO: Removing double install check for now. Maybe we can bring this
+    // feature back again if needed.
+    //
+    // if (Vue && _Vue === Vue) {
+    //   if ("development" !== 'production') {
+    //     console.error(
+    //       '[vuex] already installed. Vue.use(Vuex) should be called only once.'
+    //     )
+    //   }
+    //   return
+    // }
+    // Vue = _Vue
+
+    applyMixin(app, this, injectKey);
+  }
+
   get state () {
     return this._vm._data.$$state
   }
@@ -457,7 +471,7 @@ class Store {
     {
       assert(typeof getter === 'function', `store.watch only accepts a function.`);
     }
-    return this._watcherVM.$watch(() => getter(this.state, this.getters), cb, options)
+    return watch(() => getter(this.state, this.getters), cb, Object.assign({}, options))
   }
 
   replaceState (state) {
@@ -490,7 +504,7 @@ class Store {
     this._modules.unregister(path);
     this._withCommit(() => {
       const parentState = getNestedState(this.state, path.slice(0, -1));
-      Vue.delete(parentState, path[path.length - 1]);
+      delete parentState[path[path.length - 1]];
     });
     resetStore(this);
   }
@@ -540,30 +554,42 @@ function resetStoreVM (store, state, hot) {
   // reset local getters cache
   store._makeLocalGettersCache = Object.create(null);
   const wrappedGetters = store._wrappedGetters;
-  const computed = {};
+  const computedObj = {};
   forEachValue(wrappedGetters, (fn, key) => {
+    // TODO: Refactor following code and comment. We can simplify many things
+    // using computed function.
+    //
     // use computed to leverage its lazy-caching mechanism
     // direct inline function use will lead to closure preserving oldVm.
     // using partial to return function with only arguments preserved in closure environment.
-    computed[key] = partial(fn, store);
+    computedObj[key] = partial(fn, store);
     Object.defineProperty(store.getters, key, {
-      get: () => store._vm[key],
+      get: () => computed(() => computedObj[key]()).value,
       enumerable: true // for local getters
     });
   });
 
+  // TODO: Bring back this if it's still needed.
+  //
   // use a Vue instance to store the state tree
   // suppress warnings just in case the user has added
   // some funky global mixins
-  const silent = Vue.config.silent;
-  Vue.config.silent = true;
-  store._vm = new Vue({
-    data: {
+  // const silent = Vue.config.silent
+  // Vue.config.silent = true
+
+  // TODO: Refactor the code and remove this comment.
+  //
+  // New impl with reactive. Defining redundunt keys to make it as close as
+  // the old impl api.
+  store._vm = reactive({
+    _data: {
       $$state: state
-    },
-    computed
+    }
   });
-  Vue.config.silent = silent;
+
+  // TODO: Bring back maybe?
+  //
+  // Vue.config.silent = silent
 
   // enable strict mode for new vm
   if (store.strict) {
@@ -578,7 +604,8 @@ function resetStoreVM (store, state, hot) {
         oldVm._data.$$state = null;
       });
     }
-    Vue.nextTick(() => oldVm.$destroy());
+    // TODO: I think we don't need this anymore since we're not using vm?
+    // Vue.nextTick(() => oldVm.$destroy())
   }
 }
 
@@ -606,7 +633,7 @@ function installModule (store, rootState, path, module, hot) {
           );
         }
       }
-      Vue.set(parentState, moduleName, module.state);
+      parentState[moduleName] = module.state;
     });
   }
 
@@ -765,11 +792,11 @@ function registerGetter (store, type, rawGetter, local) {
 }
 
 function enableStrictMode (store) {
-  store._vm.$watch(function () { return this._data.$$state }, () => {
+  watch(() => store._vm._data.$$state, () => {
     {
       assert(store._committing, `do not mutate vuex store state outside mutation handlers.`);
     }
-  }, { deep: true, sync: true });
+  }, { deep: true, flush: 'sync' });
 }
 
 function getNestedState (state, path) {
@@ -790,19 +817,6 @@ function unifyObjectStyle (type, payload, options) {
   return { type, payload, options }
 }
 
-function install (_Vue) {
-  if (Vue && _Vue === Vue) {
-    {
-      console.error(
-        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
-      );
-    }
-    return
-  }
-  Vue = _Vue;
-  applyMixin(Vue);
-}
-
 /**
  * Reduce the code which written in Vue.js for getting the state.
  * @param {String} [namespace] - Module's namespace
@@ -996,9 +1010,10 @@ function getModuleByNamespace (store, helper, namespace) {
 }
 
 var index_esm = {
+  version: '4.0.0-alpha.1',
+  createStore,
   Store,
-  install,
-  version: '3.1.3',
+  useStore,
   mapState,
   mapMutations,
   mapGetters,
@@ -1007,4 +1022,4 @@ var index_esm = {
 };
 
 export default index_esm;
-export { Store, install, mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers };
+export { createStore, Store, useStore, mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers };

dist/vuex.esm.js

@@ -1,42 +1,33 @@
 /**
- * vuex v3.1.3
+ * vuex v4.0.0-alpha.1
  * (c) 2020 Evan You
  * @license MIT
  */
-function applyMixin (Vue) {
-  var version = Number(Vue.version.split('.')[0]);
+import { inject, watch, computed, reactive } from 'vue';
 
-  if (version >= 2) {
-    Vue.mixin({ beforeCreate: vuexInit });
-  } else {
-    // override init and inject vuex init procedure
-    // for 1.x backwards compatibility.
-    var _init = Vue.prototype._init;
-    Vue.prototype._init = function (options) {
-      if ( options === void 0 ) options = {};
-
-      options.init = options.init
-        ? [vuexInit].concat(options.init)
-        : vuexInit;
-      _init.call(this, options);
-    };
-  }
+var storeKey = 'store';
+
+function useStore (key) {
+  if ( key === void 0 ) key = null;
+
+  return inject(key !== null ? key : storeKey)
+}
 
-  /**
-   * Vuex init hook, injected into each instances init hooks list.
-   */
-
-  function vuexInit () {
-    var options = this.$options;
-    // store injection
-    if (options.store) {
-      this.$store = typeof options.store === 'function'
-        ? options.store()
-        : options.store;
-    } else if (options.parent && options.parent.$store) {
-      this.$store = options.parent.$store;
+function applyMixin (app, store, injectKey) {
+  app.provide(injectKey || storeKey, store);
+
+  // TODO: Refactor this to use `provide/inject`. It's currently
+  // not possible because Vue 3 doesn't work with `$` prefixed
+  // `provide/inject` at the moment.
+  app.mixin({
+    beforeCreate: function beforeCreate () {
+      if (!this.parent) {
+        this.$store = typeof store === 'function' ? store() : store;
+      } else {
+        this.$store = this.parent.$options.$store;
+      }
     }
-  }
+  });
 }
 
 var target = typeof window !== 'undefined'
@@ -289,21 +280,28 @@ function makeAssertionMessage (path, key, type, value, expected) {
   return buf
 }
 
-var Vue; // bind on install
+// let Vue // bind on install
+
+function createStore (options) {
+  return new Store(options)
+}
 
 var Store = function Store (options) {
   var this$1 = this;
   if ( options === void 0 ) options = {};
 
+  // TODO: Bring back this one if needed.
+  //
   // Auto install if it is not done yet and `window` has `Vue`.
   // To allow users to avoid auto-installation in some cases,
   // this code should be placed here. See #731
-  if (!Vue && typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
-  }
+  // if (!Vue && typeof window !== 'undefined' && window.Vue) {
+  // install(window.Vue)
+  // }
 
   if (process.env.NODE_ENV !== 'production') {
-    assert(Vue, "must call Vue.use(Vuex) before creating a store instance.");
+    // TODO: Maybe we can remove this depending on the new implementation.
+    // assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
     assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");
     assert(this instanceof Store, "store must be called with the new operator.");
   }
@@ -320,7 +318,6 @@ var Store = function Store (options) {
   this._modules = new ModuleCollection(options);
   this._modulesNamespaceMap = Object.create(null);
   this._subscribers = [];
-  this._watcherVM = new Vue();
   this._makeLocalGettersCache = Object.create(null);
 
   // bind commit and dispatch to self
@@ -352,7 +349,7 @@ var Store = function Store (options) {
   // apply plugins
   plugins.forEach(function (plugin) { return plugin(this$1); });
 
-  var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
+  var useDevtools = options.devtools !== undefined ? options.devtools : /* Vue.config.devtools */ true;
   if (useDevtools) {
     devtoolPlugin(this);
   }
@@ -360,6 +357,23 @@ var Store = function Store (options) {
 
 var prototypeAccessors$1 = { state: { configurable: true } };
 
+Store.prototype.install = function install (app, injectKey) {
+  // TODO: Removing double install check for now. Maybe we can bring this
+  // feature back again if needed.
+  //
+  // if (Vue && _Vue === Vue) {
+  // if (process.env.NODE_ENV !== 'production') {
+  //   console.error(
+  //     '[vuex] already installed. Vue.use(Vuex) should be called only once.'
+  //   )
+  // }
+  // return
+  // }
+  // Vue = _Vue
+
+  applyMixin(app, this, injectKey);
+};
+
 prototypeAccessors$1.state.get = function () {
   return this._vm._data.$$state
 };
@@ -465,13 +479,13 @@ Store.prototype.subscribeAction = function subscribeAction (fn) {
   return genericSubscribe(subs, this._actionSubscribers)
 };
 
-Store.prototype.watch = function watch (getter, cb, options) {
+Store.prototype.watch = function watch$1 (getter, cb, options) {
     var this$1 = this;
 
   if (process.env.NODE_ENV !== 'production') {
     assert(typeof getter === 'function', "store.watch only accepts a function.");
   }
-  return this._watcherVM.$watch(function () { return getter(this$1.state, this$1.getters); }, cb, options)
+  return watch(function () { return getter(this$1.state, this$1.getters); }, cb, Object.assign({}, options))
 };
 
 Store.prototype.replaceState = function replaceState (state) {
@@ -510,7 +524,7 @@ Store.prototype.unregisterModule = function unregisterModule (path) {
   this._modules.unregister(path);
   this._withCommit(function () {
     var parentState = getNestedState(this$1.state, path.slice(0, -1));
-    Vue.delete(parentState, path[path.length - 1]);
+    delete parentState[path[path.length - 1]];
   });
   resetStore(this);
 };
@@ -561,30 +575,42 @@ function resetStoreVM (store, state, hot) {
   // reset local getters cache
   store._makeLocalGettersCache = Object.create(null);
   var wrappedGetters = store._wrappedGetters;
-  var computed = {};
+  var computedObj = {};
   forEachValue(wrappedGetters, function (fn, key) {
+    // TODO: Refactor following code and comment. We can simplify many things
+    // using computed function.
+    //
     // use computed to leverage its lazy-caching mechanism
     // direct inline function use will lead to closure preserving oldVm.
     // using partial to return function with only arguments preserved in closure environment.
-    computed[key] = partial(fn, store);
+    computedObj[key] = partial(fn, store);
     Object.defineProperty(store.getters, key, {
-      get: function () { return store._vm[key]; },
+      get: function () { return computed(function () { return computedObj[key](); }).value; },
       enumerable: true // for local getters
     });
   });
 
+  // TODO: Bring back this if it's still needed.
+  //
   // use a Vue instance to store the state tree
   // suppress warnings just in case the user has added
   // some funky global mixins
-  var silent = Vue.config.silent;
-  Vue.config.silent = true;
-  store._vm = new Vue({
-    data: {
+  // const silent = Vue.config.silent
+  // Vue.config.silent = true
+
+  // TODO: Refactor the code and remove this comment.
+  //
+  // New impl with reactive. Defining redundunt keys to make it as close as
+  // the old impl api.
+  store._vm = reactive({
+    _data: {
       $$state: state
-    },
-    computed: computed
+    }
   });
-  Vue.config.silent = silent;
+
+  // TODO: Bring back maybe?
+  //
+  // Vue.config.silent = silent
 
   // enable strict mode for new vm
   if (store.strict) {
@@ -599,7 +625,8 @@ function resetStoreVM (store, state, hot) {
         oldVm._data.$$state = null;
       });
     }
-    Vue.nextTick(function () { return oldVm.$destroy(); });
+    // TODO: I think we don't need this anymore since we're not using vm?
+    // Vue.nextTick(() => oldVm.$destroy())
   }
 }
 
@@ -627,7 +654,7 @@ function installModule (store, rootState, path, module, hot) {
           );
         }
       }
-      Vue.set(parentState, moduleName, module.state);
+      parentState[moduleName] = module.state;
     });
   }
 
@@ -788,11 +815,11 @@ function registerGetter (store, type, rawGetter, local) {
 }
 
 function enableStrictMode (store) {
-  store._vm.$watch(function () { return this._data.$$state }, function () {
+  watch(function () { return store._vm._data.$$state; }, function () {
     if (process.env.NODE_ENV !== 'production') {
       assert(store._committing, "do not mutate vuex store state outside mutation handlers.");
     }
-  }, { deep: true, sync: true });
+  }, { deep: true, flush: 'sync' });
 }
 
 function getNestedState (state, path) {
@@ -813,19 +840,6 @@ function unifyObjectStyle (type, payload, options) {
   return { type: type, payload: payload, options: options }
 }
 
-function install (_Vue) {
-  if (Vue && _Vue === Vue) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.error(
-        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
-      );
-    }
-    return
-  }
-  Vue = _Vue;
-  applyMixin(Vue);
-}
-
 /**
  * Reduce the code which written in Vue.js for getting the state.
  * @param {String} [namespace] - Module's namespace
@@ -1037,9 +1051,10 @@ function getModuleByNamespace (store, helper, namespace) {
 }
 
 var index_esm = {
+  version: '4.0.0-alpha.1',
+  createStore: createStore,
   Store: Store,
-  install: install,
-  version: '3.1.3',
+  useStore: useStore,
   mapState: mapState,
   mapMutations: mapMutations,
   mapGetters: mapGetters,
@@ -1048,4 +1063,4 @@ var index_esm = {
 };
 
 export default index_esm;
-export { Store, install, mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers };
+export { createStore, Store, useStore, mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers };

dist/vuex.js

@@ -1,48 +1,37 @@
 /**
- * vuex v3.1.3
+ * vuex v4.0.0-alpha.1
  * (c) 2020 Evan You
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.Vuex = factory());
-}(this, function () { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) :
+  typeof define === 'function' && define.amd ? define(['vue'], factory) :
+  (global = global || self, global.Vuex = factory(global.Vue));
+}(this, function (vue) { 'use strict';
 
-  function applyMixin (Vue) {
-    var version = Number(Vue.version.split('.')[0]);
+  var storeKey = 'store';
 
-    if (version >= 2) {
-      Vue.mixin({ beforeCreate: vuexInit });
-    } else {
-      // override init and inject vuex init procedure
-      // for 1.x backwards compatibility.
-      var _init = Vue.prototype._init;
-      Vue.prototype._init = function (options) {
-        if ( options === void 0 ) options = {};
-
-        options.init = options.init
-          ? [vuexInit].concat(options.init)
-          : vuexInit;
-        _init.call(this, options);
-      };
-    }
+  function useStore (key) {
+    if ( key === void 0 ) key = null;
 
-    /**
-     * Vuex init hook, injected into each instances init hooks list.
-     */
-
-    function vuexInit () {
-      var options = this.$options;
-      // store injection
-      if (options.store) {
-        this.$store = typeof options.store === 'function'
-          ? options.store()
-          : options.store;
-      } else if (options.parent && options.parent.$store) {
-        this.$store = options.parent.$store;
+    return vue.inject(key !== null ? key : storeKey)
+  }
+
+  function applyMixin (app, store, injectKey) {
+    app.provide(injectKey || storeKey, store);
+
+    // TODO: Refactor this to use `provide/inject`. It's currently
+    // not possible because Vue 3 doesn't work with `$` prefixed
+    // `provide/inject` at the moment.
+    app.mixin({
+      beforeCreate: function beforeCreate () {
+        if (!this.parent) {
+          this.$store = typeof store === 'function' ? store() : store;
+        } else {
+          this.$store = this.parent.$options.$store;
+        }
       }
-    }
+    });
   }
 
   var target = typeof window !== 'undefined'
@@ -295,21 +284,28 @@
     return buf
   }
 
-  var Vue; // bind on install
+  // let Vue // bind on install
+
+  function createStore (options) {
+    return new Store(options)
+  }
 
   var Store = function Store (options) {
     var this$1 = this;
     if ( options === void 0 ) options = {};
 
+    // TODO: Bring back this one if needed.
+    //
     // Auto install if it is not done yet and `window` has `Vue`.
     // To allow users to avoid auto-installation in some cases,
     // this code should be placed here. See #731
-    if (!Vue && typeof window !== 'undefined' && window.Vue) {
-      install(window.Vue);
-    }
+    // if (!Vue && typeof window !== 'undefined' && window.Vue) {
+    // install(window.Vue)
+    // }
 
     {
-      assert(Vue, "must call Vue.use(Vuex) before creating a store instance.");
+      // TODO: Maybe we can remove this depending on the new implementation.
+      // assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
       assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");
       assert(this instanceof Store, "store must be called with the new operator.");
     }
@@ -326,7 +322,6 @@
     this._modules = new ModuleCollection(options);
     this._modulesNamespaceMap = Object.create(null);
     this._subscribers = [];
-    this._watcherVM = new Vue();
     this._makeLocalGettersCache = Object.create(null);
 
     // bind commit and dispatch to self
@@ -358,7 +353,7 @@
     // apply plugins
     plugins.forEach(function (plugin) { return plugin(this$1); });
 
-    var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
+    var useDevtools = options.devtools !== undefined ? options.devtools : /* Vue.config.devtools */ true;
     if (useDevtools) {
       devtoolPlugin(this);
     }
@@ -366,6 +361,23 @@
 
   var prototypeAccessors$1 = { state: { configurable: true } };
 
+  Store.prototype.install = function install (app, injectKey) {
+    // TODO: Removing double install check for now. Maybe we can bring this
+    // feature back again if needed.
+    //
+    // if (Vue && _Vue === Vue) {
+    // if ("development" !== 'production') {
+    //   console.error(
+    //     '[vuex] already installed. Vue.use(Vuex) should be called only once.'
+    //   )
+    // }
+    // return
+    // }
+    // Vue = _Vue
+
+    applyMixin(app, this, injectKey);
+  };
+
   prototypeAccessors$1.state.get = function () {
     return this._vm._data.$$state
   };
@@ -470,13 +482,13 @@
     return genericSubscribe(subs, this._actionSubscribers)
   };
 
-  Store.prototype.watch = function watch (getter, cb, options) {
+  Store.prototype.watch = function watch$1 (getter, cb, options) {
       var this$1 = this;
 
     {
       assert(typeof getter === 'function', "store.watch only accepts a function.");
     }
-    return this._watcherVM.$watch(function () { return getter(this$1.state, this$1.getters); }, cb, options)
+    return vue.watch(function () { return getter(this$1.state, this$1.getters); }, cb, Object.assign({}, options))
   };
 
   Store.prototype.replaceState = function replaceState (state) {
@@ -515,7 +527,7 @@
     this._modules.unregister(path);
     this._withCommit(function () {
       var parentState = getNestedState(this$1.state, path.slice(0, -1));
-      Vue.delete(parentState, path[path.length - 1]);
+      delete parentState[path[path.length - 1]];
     });
     resetStore(this);
   };
@@ -566,30 +578,42 @@
     // reset local getters cache
     store._makeLocalGettersCache = Object.create(null);
     var wrappedGetters = store._wrappedGetters;
-    var computed = {};
+    var computedObj = {};
     forEachValue(wrappedGetters, function (fn, key) {
+      // TODO: Refactor following code and comment. We can simplify many things
+      // using computed function.
+      //
       // use computed to leverage its lazy-caching mechanism
       // direct inline function use will lead to closure preserving oldVm.
       // using partial to return function with only arguments preserved in closure environment.
-      computed[key] = partial(fn, store);
+      computedObj[key] = partial(fn, store);
       Object.defineProperty(store.getters, key, {
-        get: function () { return store._vm[key]; },
+        get: function () { return vue.computed(function () { return computedObj[key](); }).value; },
         enumerable: true // for local getters
       });
     });
 
+    // TODO: Bring back this if it's still needed.
+    //
     // use a Vue instance to store the state tree
     // suppress warnings just in case the user has added
     // some funky global mixins
-    var silent = Vue.config.silent;
-    Vue.config.silent = true;
-    store._vm = new Vue({
-      data: {
+    // const silent = Vue.config.silent
+    // Vue.config.silent = true
+
+    // TODO: Refactor the code and remove this comment.
+    //
+    // New impl with reactive. Defining redundunt keys to make it as close as
+    // the old impl api.
+    store._vm = vue.reactive({
+      _data: {
         $$state: state
-      },
-      computed: computed
+      }
     });
-    Vue.config.silent = silent;
+
+    // TODO: Bring back maybe?
+    //
+    // Vue.config.silent = silent
 
     // enable strict mode for new vm
     if (store.strict) {
@@ -604,7 +628,8 @@
           oldVm._data.$$state = null;
         });
       }
-      Vue.nextTick(function () { return oldVm.$destroy(); });
+      // TODO: I think we don't need this anymore since we're not using vm?
+      // Vue.nextTick(() => oldVm.$destroy())
     }
   }
 
@@ -632,7 +657,7 @@
             );
           }
         }
-        Vue.set(parentState, moduleName, module.state);
+        parentState[moduleName] = module.state;
       });
     }
 
@@ -793,11 +818,11 @@
   }
 
   function enableStrictMode (store) {
-    store._vm.$watch(function () { return this._data.$$state }, function () {
+    vue.watch(function () { return store._vm._data.$$state; }, function () {
       {
         assert(store._committing, "do not mutate vuex store state outside mutation handlers.");
       }
-    }, { deep: true, sync: true });
+    }, { deep: true, flush: 'sync' });
   }
 
   function getNestedState (state, path) {
@@ -818,19 +843,6 @@
     return { type: type, payload: payload, options: options }
   }
 
-  function install (_Vue) {
-    if (Vue && _Vue === Vue) {
-      {
-        console.error(
-          '[vuex] already installed. Vue.use(Vuex) should be called only once.'
-        );
-      }
-      return
-    }
-    Vue = _Vue;
-    applyMixin(Vue);
-  }
-
   /**
    * Reduce the code which written in Vue.js for getting the state.
    * @param {String} [namespace] - Module's namespace
@@ -1042,9 +1054,10 @@
   }
 
   var index = {
+    version: '4.0.0-alpha.1',
+    createStore: createStore,
     Store: Store,
-    install: install,
-    version: '3.1.3',
+    useStore: useStore,
     mapState: mapState,
     mapMutations: mapMutations,
     mapGetters: mapGetters,