loading...

1

最能看懂的vuex教程【原创】

其他读完大概需要11分钟

  • 发布时间:2017-09-11 12:46 星期一
  • 刘伟波
  • 272
  • 更新于2017-09-11 12:46 星期一

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:{
type:Array //我们的字段接受的类型为数组,还可以设定默认值 default
}
},
components: {
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

productListTwo

<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"
],
components: {
},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

app.vue

<template>
<div id="app">
<product-list-one :products="products"></product-list-one>
<product-list-two :products="products"></product-list-two>
</div>
</template>

<script>
import ProductListOne from './components/productListOne.vue'
import ProductListTwo from './components/productListTwo.vue'
export default {
name: 'app',
components:{
ProductListOne,
ProductListTwo
},
data(){
return{
products:[
{name:'马云',price:200},
{name:'马化腾',price:140},
{name:'马冬梅',price:23},
{name:'马蓉',price:45},
]
}
}
}
</script>

<style>
body{
color:#555
}
</style>


2.新建store文件夹下新建store.js文件

数据我们可以利用state存放数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
state:{
products:[
{name:'马云',price:200},
{name:'马化腾',price:140},
{name:'马冬梅',price:23},
{name:'马蓉',price:45},
]
}
});


我们的app.vue没有做变化,在我们的productListOne.vue和productListTwo.vue两个组件可以改为

<script>

export default {
computed:{
products(){
return this.$store.state.products //这里的this.$store为新建的store.js暴露的store对象
}
},
}
</script>

main.js

import {store} from './store/store'

Vue.use(VueResource)
Vue.config.productionTip = false
Vue.prototype.$axios=axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})


3.最终我们讲解getters,mutations,actions的用途,最后的文件代码

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
state:{
products:[
{name:'马云',price:200},
{name:'马化腾',price:140},
{name:'马冬梅',price:23},
{name:'马蓉',price:45},
]
},
getters:{
saleProducts:(state)=>{
let saleProducts=state.products.map( //这里的map为遍历state.products数组,返回我们要修改的格式
product=>{
return {
name:'**'+product.name+'**',
price:product.price / 2
}
}
);
return saleProducts;
}
},
mutations:{
reducePrice:(state,payload)=>{ //payload 为我们点击按钮的时候传过来的参数
state.products.forEach(product=>{
product.price-=payload
})
}
},
actions:{
reducePrice:(context,payload)=>{ //actions更方便我们进行异步操作,payload我们进行接收和commit
// setTimeout(function () {
context.commit('reducePrice',payload)
// },2000)
}
}
});

app.vue

<template>
<div id="app">
<product-list-one></product-list-one> //这里我们就不用传统的props来传值
<product-list-two></product-list-two>
</div>
</template>

<script>
import ProductListOne from './components/productListOne.vue'
import ProductListTwo from './components/productListTwo.vue'
export default {
name: 'app',
components:{
ProductListOne,
ProductListTwo
}
}
</script>

<style>
body{
color:#555
}
</style>

productListOne.vue

<template>
<div id="product-list-one">
<h2>Product List One</h2>
<ul>
<li v-for="product in saleProducts">
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span>
</li>
</ul>
<button @click="reducePrice(4)"> 商品降价</button>
</div>
</template>

<script>
import {mapGetters} from 'vuex'
import {mapActions} from 'vuex'
export default {
computed:{
products(){
return this.$store.state.products
},
// saleProducts(){
// return this.$store.getters.saleProducts;
// },
...mapGetters([
'saleProducts' //我们要遍历的数组,为了方便引入了vuex提供的...mapGetters 就不用每一个方法写一个saleProducts(){return .....}
])
},
methods:{
...mapActions([
'reducePrice'
])
// reducePrice(amount){
//// this.$store.state.products.forEach(product=>{
//// product.price-=1
//// })
//// this.$store.commit('reducePrice')
// this.$store.dispatch('reducePrice',amount)
// }
},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

productListTwo.vue

<template>
<div id="product-list-two">
<h2>Product List Two</h2>
<ul>
<li v-for="product in saleProducts">
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span>
</li>
</ul>
</div>
</template>

<script>

export default {
computed:{
products(){
return this.$store.state.products
},
saleProducts(){
return this.$store.getters.saleProducts;
}
},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>





你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!