vuex的state,gettters,mutations,actions学习笔记

最近自己用vue全家桶写了一个微商城，下面我们将以这个讲解我的学习过程，截取部分代码。

具体请看https://github.com/LitterPig/test-vueApp

想要使用他们，首先得安装vuex，所以第一步就是安装vuex了。。。。。。

1.安装vuex，会在我们的package.json里面的dependencies看到vuex安装信息

npm install vuex --save

2. main.js里面引入store,并将他挂载到App上

import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

3.此时我们在src下新建文件夹cart,里面分别是对cart模块的state.js,gettters.js,mutations.js,actions.js，分开在不同文件来写，是方便以后内容过多，便于查看和后期的维护

4.在src下创建store文件夹，里面新建一个index.js,里面是我们需要用vuex来处理的模块了

import Vue from 'vue'
import Vuex from 'vuex'
import cart from './cart/cart'

Vue.use(Vuex)
const store = new Vuex.Store({
    modules:{
        cart
    }
})
export default store

5.state在我看来，他的存在相当于一个全局变量，对于任何非父子组件来说，我们都想要获取一个值，那我们可以定义在state里面，那我们以后想在组件里面获取该值的话，可以通过this.$store.state.state中的参数名获取，例如：

//state.js
export default {
    cartInfos:{
        total_price:0,   //商品总价
        total_amount:0,  //商品的数量
    },
    cartList:[],   //购物车商品数组
 }

6.getters,太相当于一个计算属性，他计算的是state里面的参数值

//getters.js
export default {
    getCartList: state =>{
        return state.cartList
    },
    getCartListLen: state =>{
        return state.cartList.length
    },
    getTotalPrice: state =>{
        return state.cartInfos.total_price
    },
}

7.mutations,在里面我们对state里的参数进行一些操作，即函数，他可以直接修改state里面的状态，但是最好在mutations里面不要进行异步操作，官网上不推荐

//mutations.js
export default {
   add_cart(state,product){
        console.log(state)
        console.log(product)
        state.cartList.push(product);
        state.cartInfos.total_amount = state.cartInfos.total_amount + product.amount
   },
}

在组件里面用this.$store.commit('ADD_CART',product)，就可以触发这个函数了，其中product是获取组件的商品的信息，这时候需要传参。

8.actions是需要执行多个 mutations,就是我们一个方法里面，需要触发多个commit，这时候时候我们可以考虑用actions了

//actions.js
export default {
     add_cart(context){
        state.commit('total_price')
        state.commit('is_exist')
     }
}

在组件里面，我们可以用this.$store.dispatch('add_cart')来触发，其中context和我们使用$store拥有相同的对象和方法。actions不能直接修改state里面参数的状态，只能通过mutations简介改变，而且他支持异步操作

下一篇将会介绍mapState，mapGetters,mapMutations,mapActions!