updating dependencies in sample projects, updating code accordingly

```
npm i -D react-scripts@latest
npm i -S react@latest react-dom@latest react-vuex@latest vue@latest vuex@latest
```

examples/simple-counter/package.json

@@ -3,15 +3,15 @@
   "version": "0.0.1",
   "private": true,
   "devDependencies": {
-    "react-scripts": "^3.4.1"
+    "react-scripts": "^4.0.3"
   },
   "dependencies": {
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-vuex": "^0.3.1",
-    "vue": "^2.6.11",
-    "vuex": "^3.5.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-vuex": "^0.3.2",
+    "vue": "^2.6.14",
+    "vuex": "^3.6.2"
   },
   "scripts": {
     "start": "react-scripts start",

examples/simple-counter/src/components/Child1.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-
 const Child1 = ({
   test, myCount, limitCount, isGreaterThan2, onIncrement, onIncrementAsync,
   children,
@@ -14,6 +13,7 @@ const Child1 = ({
 
   function handleIncAsync() {
     if (onIncrementAsync) {
+      // eslint-disable-next-line no-console
       onIncrementAsync().then(console.log);
     }
   }
@@ -29,11 +29,9 @@ const Child1 = ({
       : 
       {isGreaterThan2 ? 'yes' : 'no'}
       {onIncrement
-        && <button type="button" onClick={handleInc}>Test</button>
-      }
+        && <button type="button" onClick={handleInc}>Test</button>}
       {onIncrementAsync
-        && <button type="button" onClick={handleIncAsync}>Test async</button>
-      }
+        && <button type="button" onClick={handleIncAsync}>Test async</button>}
       {children}
     </div>
   );

examples/simple-counter/src/containers/VisibleChild1.js

@@ -3,16 +3,16 @@ import Child1 from '../components/Child1';
 import mutations from '../mutations';
 import actions from '../actions';
 
-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = (state/* , ownProps */) => ({
   myCount: state.count,
 });
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  onIncrementAsync: val => dispatch(actions.incrementAsync(val)),
+const mapDispatchToProps = (dispatch/* , ownProps */) => ({
+  onIncrementAsync: (val) => dispatch(actions.incrementAsync(val)),
 });
-const mapCommitToProps = (commit, ownProps) => ({
+const mapCommitToProps = (commit/* , ownProps */) => ({
   onIncrement: () => commit(mutations.increment()),
 });
-const mapGetterToProps = (getter, ownProps) => ({
+const mapGetterToProps = (getter/* , ownProps */) => ({
   isGreaterThan2: getter.countGreaterThan2,
 });
 

examples/simple-counter/src/containers/VisibleChild2.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-vuex';
 import Child1 from '../components/Child1';
 
-const mapGetterToProps2 = (getter, ownProps) => ({
+const mapGetterToProps2 = (getter/* , ownProps */) => ({
   isGreaterThan2: getter.countGreaterThan2,
 });
 

examples/simple-counter/src/containers/VisibleChild3.js

@@ -1,17 +1,17 @@
 import { connect } from 'react-vuex';
 import Child1 from '../components/Child1';
 
-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = (state/* , ownProps */) => ({
   limitCount: 1002,
   myCount: state.mod1.count,
 });
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  onIncrementAsync: val => dispatch('mod1/incrementAsync'),
+const mapDispatchToProps = (dispatch/* , ownProps */) => ({
+  onIncrementAsync: () => dispatch('mod1/incrementAsync'),
 });
-const mapCommitToProps = (commit, ownProps) => ({
+const mapCommitToProps = (commit/* , ownProps */) => ({
   onIncrement: () => commit('mod1/increment'),
 });
-const mapGetterToProps = (getter, ownProps) => ({
+const mapGetterToProps = (getter/* , ownProps */) => ({
   isGreaterThan2: getter['mod1/countGreaterThan1002'],
 });
 const VisibleChild3 = connect(

examples/simple-counter/src/store/index.js

@@ -11,21 +11,24 @@ export default new Vuex.Store({
     isIncrementing: false,
   },
   getters: {
-    countGreaterThan2: (state, getters) => state.count > 2,
+    countGreaterThan2: (state/* , getters */) => state.count > 2,
   },
   mutations: {
     [INCREMENT](state) {
+      // eslint-disable-next-line no-param-reassign
       state.count += 1;
     },
     [INCREMENT_START](state) {
+      // eslint-disable-next-line no-param-reassign
       state.isIncrementing = true;
     },
     [INCREMENT_STOP](state) {
+      // eslint-disable-next-line no-param-reassign
       state.isIncrementing = false;
     },
   },
   actions: {
-    [INCREMENT_ASYNC]({ commit, state }, payload) {
+    [INCREMENT_ASYNC]({ commit, state }/* , payload */) {
       commit(INCREMENT_START);
       return new Promise((resolve) => {
         setTimeout(() => {
@@ -44,16 +47,19 @@ export default new Vuex.Store({
         isIncrementing: false,
       },
       getters: {
-        countGreaterThan1002: (state, getters) => state.count > 1002,
+        countGreaterThan1002: (state/* , getters */) => state.count > 1002,
       },
       mutations: {
         increment(state) {
+          // eslint-disable-next-line no-param-reassign
           state.count += 1;
         },
         incrementStart(state) {
+          // eslint-disable-next-line no-param-reassign
           state.isIncrementing = true;
         },
         incrementStop(state) {
+          // eslint-disable-next-line no-param-reassign
           state.isIncrementing = false;
         },
       },