vuex
vuex是vue.js应用程序的状态管理模式库，它充当应用程序中所有的组件的集中存储。
安装：npm install vuex --save
使用：
1.在src这个目录下面新建一个文件夹为store 在store里面新建一个store.js
2.import Vuex from "地址"
3.Vue.use(Vuex)
4.export default store = new Vuex.Store({})
相关属性：
state属性：专门用来存放数据的，存放在的数据都是响应式的
getters属性：类似于计算属性，改变store里面的数据
mutaions属性：在触发事件的时候，能够更好的调试当前的一个点击状态。
action属性：类似于mutaions，任意的异步的操作，传递响应的参数
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{},
getters:{},
mutations:{},
actions:{}
})
//组件中
<template>
<div id="ProductListOne">
<ul><li v-for="(item,index) in saleProducts"></li></ul>
<button @click="reducePrice(4)">商品降价</button>
</div>
</template>
<script>
import {mapGetters} from "vuex"
import {mapActions} from "vuex"
export default {
methods:{
reducePrice(amout){
// commit 触发 mutations 中的方法
// 基本使用方法：this.store.commit("要出发的方法名",[传递的参数，注意：不要传参时可省略])
this.$store.commit("reducePrice",amout)
// dispatch 触发 actions 中的方法
// 基本使用方法：this.store.dispatch("要出发的方法名",[传递的参数，注意：不要传参时可省略])
this.$store.dispatch("reducePrice",amout)
},
// ...mapActions(['reducePrice'])//<=>上面的reducePrice方法
// 注意：使用...mapActions(['reducePrice'])时，里面的参数要与store.js的mutations中方法同名
},
computed:{
products(){
// 基本语法：this.$store.state.相关参数
return this.$store.state.products;//调用state里面的数据
},
saleProducts(){
return this.$store.getters.saleProducts;//调用getters里面的方法
},
// ...mapGetters(['saleProducts'])//<=>上面的saleProducts方法
// 注意：使用...mapGetters(['saleProducts'])时，里面的参数要与store.js的getters中方法同名
}
}
</script>
//store.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{
products:[]
},
getters:{
saleProducts(state){}
},
mutations:{//第一个参数：无论怎么命名都指state,第二个参数：值传递的数据，尽量命名payload
reducePrice(state,payload){
state.products.forEach((product) => {
// setTimeout(() => {
product.price -= payload;
// },2000)
})
}
},
actions:{
reducePrice(context,payload){//第一个参数：无论怎么命名都指上下文store,第二个参数：值传递的数据，尽量命名payload
setTimeout(() => {
context.commit("reducePrice",payload);
},0)
}
}
})
