项目搭建完成后,
不使用vuex
src文件夹里:
App.vue:
<template>
<div id="app">
<product-list-one v-bind:products="products"></product-list-one> // 通过v-bind绑定数据
<product-list-two v-bind:products="products"></product-list-two>
</div>
</template>
<script>
import productListOne from './components/productListOne'
import productListTwo from './components/productListTwo'
export default {
name: 'app',
components: {
'product-list-one': productListOne,
'product-list-two': productListTwo,
},
data () { // 数据放在data里
return {
products:[
{name:"马云",price:200},
{name:"马化腾",price:140},
{name:"马冬梅",price:20},
{name:"马蓉",price:10},
]
}
}
}
</script>
<style>
body{
font-family: Ubuntu;
color:#555;
}
</style>
组件1:productListOne.vue
<template>
<div id="product-list-one">
<h2>Product-List-One</h2>
<ul>
<li v-for="product in products">
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props:["products"], // 通过props属性接收父组件传递的数据
data () {
return {
}
}
}
</script>
<style>
#product-list-one {
background: #fff881;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
margin-top: 30px;
padding: 10px 20px;
}
#product-list-one ul {
padding: 0;
}
#product-list-one ul li {
margin-right: 10x;
margin-top: 10px;
padding: 20px;
background: rgba(255,255,255,0.7);
}
.price{
font-weight: bold;
color: #e8800c;
display: block;
}
</style>
组件2:productListTwo.vue
<template>
<div id="product-list-two">
<h2>Product-List-Two</h2>
<ul>
<li v-for="product in products">
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props:["products"], // 通过props属性接收父组件传递的数据
data () {
return {
}
}
}
</script>
<style scoped>
#product-list-two {
background: #d1e4ff;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
margin-top: 30px;
padding: 10px 20px;
}
#product-list-two ul {
padding: 0;
list-style-type: none;
}
#product-list-two ul li {
margin-right: 10x;
margin-top: 10px;
padding: 20px;
background: rgba(255,255,255,0.7);
}
.price{
font-weight: bold;
color: #860ce8;
display: block;
}
</style>
vuex使用后
src文件夹下新建state文件夹,并新建state.js文件,将原App.vue里的data,放在state.js里
state.js
import Vue from 'vue'
import Vuex from 'vuex'
// 通过use让vue使用vuex
Vue.use(Vuex)
// 设定store,必须通过export暴露出去
export const store = new Vuex.Store({
state: {
products:[
{name:"马云",price:200},
{name:"马化腾",price:140},
{name:"马冬梅",price:20},
{name:"马蓉",price:10},
]
}
})
main.js文件中引入store
import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store' // 引入
new Vue({
store:store, // 引入
el: '#app',
render: h => h(App)
})
App.vue文件里的data数据删除,template里的组件不再需要v-bind绑定数据,
<template>
<div id="app">
<product-list-one></product-list-one> // 不需要v-bind绑定
<product-list-two></product-list-two> // 不再需要v-bind绑定
</div>
</template>
<script>
import productListOne from './components/productListOne'
import productListTwo from './components/productListTwo'
export default {
name: 'app',
components: {
'product-list-one': productListOne,
'product-list-two': productListTwo,
},
data () {
return {
// products:[
// {name:"马云",price:200},
// {name:"马化腾",price:140},
// {name:"马冬梅",price:20},
// {name:"马蓉",price:10},
// ]
}
}
}
</script>
<style>
body{
font-family: Ubuntu;
color:#555;
}
</style>
子组件里不需要再通过props属性传值
而是通过调用方法获取store.js里的数据
productListOne.vue
<template>
<div id="product-list-one">
<h2>Product-List-One</h2>
<ul>
<li v-for="product in products">
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
// props:["products"],
// data () {
// return {
// }
// }
// 通过调用方法获取store.js里的数据
computed: {
products() {
return this.$store.state.products
}
}
}
</script>
<style>
#product-list-one {
background: #fff881;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
margin-top: 30px;
padding: 10px 20px;
}
#product-list-one ul {
padding: 0;
}
#product-list-one ul li {
margin-right: 10x;
margin-top: 10px;
padding: 20px;
background: rgba(255,255,255,0.7);
}
.price{
font-weight: bold;
color: #e8800c;
display: block;
}
</style>