vue.js学习(day 19)
自定义创建项目https://i-blog.csdnimg.cn/direct/0743d1c78ce74c968de0c4a53dda63c3.png
ESlint 代码规范
https://i-blog.csdnimg.cn/direct/7be0ba93dfca4a98b9b017ac900d7d18.png代码规范错误 https://i-blog.csdnimg.cn/direct/13d8e76352074cceb3ca5464cfb4b59c.png
手动修正
https://i-blog.csdnimg.cn/direct/8ee6934314ea43b8bdceb404f52df6a6.png
自动修正
https://i-blog.csdnimg.cn/direct/bb0273ef3d6f415eb0e59d02c6fa60a1.png
settings.json
{
"emmet.triggerExpansionOnTab": true,
"editor.fontSize": 25,
// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false
} vuex概述https://i-blog.csdnimg.cn/direct/c9d1723c85594d1db3e7a5dfcb06af37.png
构建vuex[多组件数据共享]环境
https://i-blog.csdnimg.cn/direct/f59e6a5ada3c4887a3fce8e13d021fb9.png
创建一个空堆栈https://i-blog.csdnimg.cn/direct/80c68891e8194b0bbd8bcea5be732129.png
index.js
// 这里面存放的就是 vuex 相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import setting from './modules/setting'
// 插件安装
Vue.use(Vuex)
// 创建仓库(空仓库)
const store = new Vuex.Store()
// 导出给main.js使用
export default store
main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index' // 导入
console.log(store.state.count)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store // 挂载
}).$mount('#app')
核心概念：state 状态
提供数据
https://i-blog.csdnimg.cn/direct/33aba19bdf464354b93b51607494b56d.png
index.js
// 这里面存放的就是 vuex 相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import setting from './modules/setting'
// 插件安装
Vue.use(Vuex)
// 创建仓库(空仓库)
const store = new Vuex.Store({
// 1. 通过 state 可以提供数据 (所有组件共享的数据)
state: {
title: '仓库大标题',
count: 100,
list:
}
})
// 导出给main.js使用
export default store
利用数据
通过 store 直接访问
https://i-blog.csdnimg.cn/direct/356ed81cb1b04172a252707fc531e4b7.png
通过辅助函数 (简化)
https://i-blog.csdnimg.cn/direct/e0072ccef62342b8ad82cf0ba0fedae7.png App.vue
<template>
<div id="app">
<h1>
根组件
- {{ title }}
- {{ count }}
</h1>
<input :value="count" @input="handleInput" type="text">
<Son1></Son1>
<hr>
<Son2></Son2>
</div>
</template>
<script>
import Son1 from './components/son1'
import Son2 from './components/son2'
// 1.导入 mapState
import { mapState } from 'vuex'
// console.log(mapState(['count', 'title']))
export default {
name: 'app',
created () {
// console.log(this.$router) // 没配
console.log(this.$store.state.count)
},
computed: { // 3.展开运算符映射
...mapState(['count', 'title']) // 2.数组方式引入state
},
</script>
<style>
#app {
width: 600px;
margin: 20px auto;
border: 3px solid #ccc;
border-radius: 3px;
padding: 10px;
}
</style>
核心概念：mutations
https://i-blog.csdnimg.cn/direct/e3a3921b7ed04b78b3c1d4e5a95d12a5.pnghttps://i-blog.csdnimg.cn/direct/0375589eadcd40b38a69ae0f601d7350.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]