vue.js学习(day 19)

自定义创建项目 

ESlint 代码规范 

代码规范错误 

手动修正 

 
自动修正 

 
 settings.json

1. {
2.     "emmet.triggerExpansionOnTab": true,
3.     "editor.fontSize": 25,
4.    
5.     // 当保存的时候，eslint自动帮我们修复错误
6.     "editor.codeActionsOnSave": {
7.         "source.fixAll": true
8.     },
9.     // 保存代码，不自动格式化
10.     "editor.formatOnSave": false
11. }

复制代码

 vuex概述

构建vuex[多组件数据共享]环境 

 
 创建一个空堆栈

index.js 

1. // 这里面存放的就是 vuex 相关的核心代码
2. import Vue from 'vue'
3. import Vuex from 'vuex'
4. import user from './modules/user'
5. import setting from './modules/setting'
7. // 插件安装
8. Vue.use(Vuex)
10. // 创建仓库(空仓库)
11. const store = new Vuex.Store()
13. // 导出给main.js使用
14. export default store

复制代码

 main.js

1. import Vue from 'vue'
2. import App from './App.vue'
3. import store from '@/store/index' // 导入
4. console.log(store.state.count)
6. Vue.config.productionTip = false
8. new Vue({
9.   render: h => h(App),
10.   store // 挂载
11. }).$mount('#app')

复制代码

核心概念：state 状态 

提供数据

index.js 

1. // 这里面存放的就是 vuex 相关的核心代码
2. import Vue from 'vue'
3. import Vuex from 'vuex'
4. import user from './modules/user'
5. import setting from './modules/setting'
7. // 插件安装
8. Vue.use(Vuex)
10. // 创建仓库(空仓库)
11. const store = new Vuex.Store({
13.   // 1. 通过 state 可以提供数据 (所有组件共享的数据)
14.   state: {
15.     title: '仓库大标题',
16.     count: 100,
17.     list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
18.   }
19. })
21. // 导出给main.js使用
22. export default store

复制代码

 
利用数据 

通过 store 直接访问

 通过辅助函数 (简化)

 App.vue

1. <template>
2.   <div id="app">
3.     <h1>
4.       根组件
5.       - {{ title }}
6.       - {{ count }}
7.     </h1>
8.     <input :value="count" @input="handleInput" type="text">
9.     <Son1></Son1>
10.     <hr>
11.     <Son2></Son2>
12.   </div>
13. </template>
15. <script>
16. import Son1 from './components/son1'
17. import Son2 from './components/son2'
19. // 1.导入 mapState
20. import { mapState } from 'vuex'
21. // console.log(mapState(['count', 'title']))
23. export default {
24.   name: 'app',
25.   created () {
26.     // console.log(this.$router) // 没配
27.     console.log(this.$store.state.count)
28.   },
29.   computed: { // 3.展开运算符映射
30.     ...mapState(['count', 'title']) // 2.数组方式引入state
31.   },
33. </script>
35. <style>
36. #app {
37.   width: 600px;
38.   margin: 20px auto;
39.   border: 3px solid #ccc;
40.   border-radius: 3px;
41.   padding: 10px;
42. }
43. </style>

复制代码

核心概念：mutations 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。