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 {
//console.log(this.$store.state.product)获取这个数组显示出来
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:{
//改变数据
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:{
//计算state的计算属性
changdataa:(state)=>{
var changdataa=state.product.map(
//有返回值
product =>{
return{
name:"**"+product.name+"*",
price:product.price/2
};
});
return changdataa;
}
},
mutations:{
// 更改state中状态的逻辑，同步操作 .用于触发事件,改变数据
reduceprice:(state)=>{
state.product.forEach(pro=>{
pro.price-=1;
})
}
},
actions: {
// 提交mutation而不是直接变更状态，可以包含任意异步操作
// action函数接受一个context参数，这个context具有与store实例相同的方法和属性。
// 分发action
// store.dispatch('reduce');
// action同样支持payload和对象方式来分发，格式跟commit是一样的，不再赘述 是提交actions的时候使用的是dispatch函数
reduce:(context,payload)=>{
setTimeout(()=>{
context.commit("reduce",payload)
},2000)
}
},
})
在页面中改变数据
computed:{
product(){
return this.$store.state.product
},
//改变数据
changdataa(){
return this.$store.getters.changdataa;
}
}
methods:{
reduce(mount){
//this.$store.commit('increment');在组件中提交调用mutations
this.$store.dispatch("reduce",mount)//提交调用anction的数据
}
}
