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')
}
}
}