├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── store
    │   └── index.js
    └── App.vue
├── babel.config.js
├── README.md
├── .gitignore
├── .eslintrc.js
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danvega/vuex-next/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danvega/vuex-next/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + Vuex Tutorial
2 | 
3 | A quick example of a Vue Component using the Composition API and Vuex.
4 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue'
3 | import store from './store'
4 | 
5 | const app = createApp(App)
6 | app.use(store)
7 | app.mount('#app')
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore } from 'vuex'
 2 | 
 3 | const state = {
 4 |   count: 0
 5 | }
 6 | 
 7 | const mutations = {
 8 |   increment (state) {
 9 |     state.count++
10 |   },
11 |   decrement (state) {
12 |     state.count--
13 |   }
14 | }
15 | 
16 | export default createStore({
17 |   state,
18 |   mutations
19 | })
20 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
16 |     "no-unused-vars": "off",
17 |     "vue/valid-template-root": 0
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p>Count: {{ count }}</p>
 3 |   <button @click="increment()">Increment</button>
 4 |   <button @click="decrement()">Decrement</button>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { computed } from "vue";
 9 | import { useStore } from "vuex";
10 | 
11 | export default {
12 |   setup() {
13 |     const store = useStore();
14 |     const count = computed(() => store.state.count);
15 | 
16 |     function increment() {
17 |       store.commit("increment");
18 |     }
19 | 
20 |     function decrement() {
21 |       store.commit("decrement");
22 |     }
23 | 
24 |     return { count, increment, decrement };
25 |   }
26 | };
27 | </script>
28 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuex-next",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "vue": "^3.0.0-alpha.4",
13 |     "vuex": "^4.0.0-alpha.1"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "^4.2.0",
17 |     "@vue/cli-plugin-eslint": "^4.2.0",
18 |     "@vue/cli-service": "^4.2.0",
19 |     "@vue/compiler-sfc": "^3.0.0-alpha.4",
20 |     "babel-eslint": "^10.0.3",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.1.2",
23 |     "vue-cli-plugin-vue-next": "0.0.4",
24 |     "vue-template-compiler": "^2.6.11"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------