vuex使用

标签：安装   ror   rod   组件   efault   console   actions   time   数据   

1.安装cnpm install  vuex --save 

2.src/新建立一个文件夹叫store,里面新建一个js,叫做strore.js

3.在store.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
/*外部想要引入这个export*/
export const store =new Vuex.Store({
state:{
product:[
{name:"虎刺蛾2",price:200},
{name:"虎刺蛾3",price:100},
{name:"虎刺蛾4",price:80},
{name:"虎刺蛾5",price:50}
]
}

4.mian.js 

 import {store}  from ‘./store/store‘

new Vue(){

 store:store

}

5.使用数据显示出来

<template>
<div class="hello">
<ul>
<li v-for="pro in product">
{{pro.name}}<br>
{{pro.price}}
</li>
</ul>
</div>
</template>

<script>
export default {
computed:{
product(){
return this.$store.state.product
console.log(this.$store.state.product)
}
}
}
</script>

想要改变数据

<template>
<div class="hello">
<ul>
<li v-for="pro in changdataa">
{{pro.name}}<br>
{{pro.price}}
</li>
</ul>
</div>
</template>

<script>
export default {
computed:{
product(){
return this.$store.state.product
//console.log(this.$store.state.product)
},
//改变数据
changdataa(){
var changdataa=this.$store.state.product.map(
product =>{
return{
name:"**"+product.name+"*",
price:product.price/2
};
});
return changdataa;
}
}
}
</script>

多个组件得复制简写改变数据

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
/*外部想要引入这个export*/
export const store =new Vuex.Store({
state:{
product:[
{name:"虎刺蛾2",price:200},
{name:"虎刺蛾3",price:100},
{name:"虎刺蛾4",price:80},
{name:"虎刺蛾5",price:50}
]
},
getters:{
changdataa:(state)=>{
var changdataa=state.product.map(
product =>{
return{
name:"**"+product.name+"*",
price:product.price/2
};
});
return changdataa;

}

},
mutations:{
reduceprice:(state)=>{
state.product.forEach(pro=>{
pro.price-=1;

})

}
},
actions:{
reduceprice:(context,playload)=>{
setTimeout(function(){
context.commit("reduceprice",playload)
},2000)
this.$store.dispatch("reduceprice",amount)
}
}

})

computed:{
product(){
return this.$store.state.product
},
//改变数据
changdataa(){
return this.$store.getters.changdataa;
}
}

//点击时间

methods:{
reduceprice(){
this.$store.commit(‘reduceprice‘)
}

}
}

vuex使用

标签：安装   ror   rod   组件   efault   console   actions   time   数据   

原文地址：https://www.cnblogs.com/xzhce/p/12829856.html