vue-cli2.0如何利用vuex

vuex是什么呢？vuex是一种vue.js应用程序开发的状态管理模式，也就是说vuex是统一管理数据状态的模式!
首先vue-cli2.0中不会自动创建vuex的相关文件，需要我们自己手动安装相应的模块
① 安装vuex cnpm/npm i vuex -S
② 在根目录下，也就是src里面，手动创建一个store文件夹，在store里面创建一个index.js
并在index.js中添加以下内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state:{
       num: 0，
       albumList : [{
      "album": "模特",
      "singer": "李荣浩",
      "cover": "http://jxsjs.com/img/album1.jpg",
      "price": 100,
      "number": 9
  }, {
      "album": "生命因你而火热",
      "singer": "新裤子",
      "cover": "http://jxsjs.com/img/album2.jpg",
      "price": 200,
      "number": 6
  }
    },
    mutations:{
        setnum(state,val){
       		 state.num = val
        }
    },
    actions:{
    //必须传commit
	add({commit},n){
	console.log(commit,n)
	}
},
    getters:{
		totalPrice(state){
     			let price = 0;
      			state.albumList.forEach((item)=>{
        		price+=item.price*item.number
      })
      return price
    },
}
})
export default store

vuex的四个属性
state存放数据的地方，相当于vue实例中的data属性
mutations 是定义所有的方法 ，相当于vue实例中的methods属性
getters是计算属性，相当于vue实例中的computed属性
actions是异步请求数据
拿以上代码为例
setnum(state,val){
state.num = val
}
改变数据定义方法的时候，一定要传state这个参数

数据已经准备好，那在组件中是如何调用vuex中定义的数据和方法的呢？
组件中调用state数据 this.$store.state.num
插值绑定 {{$store.state.num}}
组件中调用mutations中的方法

methods:{
	setNum(){
		this.$store.commmit('setNum',10)
	}
}

组件中调用getters中的数据

this.$store.getters('totalPrice')

vuex当然还有更简便的方法来调用这些数据啦
那就是利用vuex内部提供的语法糖 mapState mapMutations ,mapActions mapGetters
在组件中，先引入这些语法糖

import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'

获取vuex中的数据可以这样写啦

computed:{
        ...mapState(['num']),//可传多个数据
        ...mapGetters(['totalPrice'])//可传多个方法
   },
   methods:{
   ...mapMutations(['setNum'])
   }

actions

actions是异步的
组件中dispatch派发
this.$store.dispatch(‘add’)