vuex的使用

一、安装

npm i vuex -S

二、引进vuex并使用vuex

store/store.js中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
    state:{},
    getter:{},
    mutation:{},
    action:{}
})

main.js中
import Vue from 'vue'
import App from './App.vue'
import {store} from 'src/store/store'
new Vue({
    store:store,
    el:'#app',
    reder: h=>h(App)
})

三、使用state

store.js中
state:{
    products:[
        {name:'aa',price:22},
        {name:'bb',price:33}
    ]
}
组件中
computed:{
    products(){
        return this.$store.state.products
    }
}

四、使用getters

store.js中
getters:{
    salProducts:(state)=>{
        return state.products.map(item=>{
            return {
                name:'**' + item.name + '**',
                price: item.price + 10
            }
        })
    }
}
组件中
computed:{
    saleProducts(){
        return this.$store.getters.saleProducts
    }
}

五、使用mutations

store.js中
mutations:{
    reducePrice: state =>{
        state.products.forEach(item=>{
            item.price -= 1
        })
    }
}
组件中
<button @click="reducePrice">降价</button>
methods:{
    reducePrice: function(){
        this.$store.commit('reducePrice')//触发mutations中的reducePrice方法
    }
}

六、使用actions(可以处理异步操作，并且可以传参)

store.js中
mutations:{
    reducePrice:(state,payload)=>{
        state.products.forEach(item=>{
            item.price -= payload
        })
    }
},
actions:{
    reducePrice: (context,payload)=>{
        setTimeout(function(){//异步操作
            context.commit('reducePrice',payload)//触发mutations中的reducePrice
        },2000)
    }
}
组件中：
<button @click="reducePrice(3)"></button>
methods:{
    reducePrice:function(amount){
        this.$store.dispatch('reducePrice',amount);//调用actions中的reducePrice
    }
}