十分钟入门使用Vuex

1.Vuex的应用场景

如果用props传值的方式应用在多组件的项目中是一件繁杂且不利于维护管理的方式，很显然这并不是我们想要的组件化的开发体验，因此Vuex就是为了解决这一问题的出现

2.项目中引入Vuex

npm install vuex --save

• 安装完Vuex后在项目src目录新建一个store文件夹且存放Vuex的状态管理

//引入vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'

//引入之后，对vuex进行引用
Vue.use(Vuex)

• main.js中引入且注册store仓库

//引入仓库
import store from '@/store'

new Vue({
  render: h => h(App),
  //注册路由
  router,
  //注册仓库：组件实例的身上会多个$store的属性
  store
}).$mount('#app')

3.Vuex核心概念

• state是用来定义状态，通俗易懂的讲就是将state看作是store的data，用于保存所有组建的公共数据
  

组件中获取state仓库中的数据：

data(){
	return{
		userList: this.$store.state.userList//获取store中state的数据
	}
}

• getters是用来对状态进行过滤的，可以理解为store的computed属性，getters的返回值会根据它的依赖被缓存起来且只有当它的依赖值发生了改变才会被重新计算

组件中使用：

data(){
	return{
		userList: this.$store.getters.userListModel
	}
}

• mutaions是一个同步状态管理器，可以理解为store的methods，且有两个参数（第一个参数是state，第二个参数是payload，也就是自定义的参数）

注：在组件中调用使用mutaions中的回调函数只能使用$store.commit(type, payload)

methods:{
	userListFun(){
		this.$store.commit('mutaions方法名',自定义参数)
	}
}

• actions是一个异步状态管理器，actions有点类似于mutaions，但是actions可以包含异步操作，mutaions绝对不允许出现异步

在组件中分发actions

methods:{
	userListFun(){
		this.$store.dispatch('minusPriceAsync', 5)
	}
}

4.测试store的demo

const store = new Vuex.Store({
  state:{
    products: [
      {name: '鼠标', price: 20},
      {name: '键盘', price: 40},
      {name: '耳机', price: 60},
      {name: '显示屏', price: 80}
    ]
  },
  getters:{
    saleProducts: (state) => {
      let saleProducts = state.products.map( product => {
        return {
          name: product.name,
          price: product.price / 2
        }
      })
      return saleProducts;
    }
  },
  mutations:{
    minusPrice (state, payload ) {
      let newPrice = state.products.forEach( product => {
        product.price -= payload
      })
    }
  },
  actions:{ //添加actions
    minusPriceAsync( context, payload ) {
      setTimeout( () => {
        context.commit( 'minusPrice', payload ); //context提交
      }, 2000)
    }
  }
})