Vuex简述

一.搭建框架

npm install vuex --save//npm下载
//引入vue
import Vue from "vue"
//引入vuex
import Vuex from "vuex"
//注册vuex
Vue.use(Vuex);
//vuex实例化 -- new
const store = new Vuex({
  //核心配置
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    }  
})
//导出vuex
export default store;
//main.js调用
import store from "./store"
const vm = new Vue({
    store:store,
    render: h => h(App)
}).$mount('#app')

二.使用vuex

//调用方式 -- 全局使用
{{$store.stste.count}}
//局部调用
this.$store.state.count;
//全局调用mutations方法
按钮点击事件 @click="$store.commit(’方法名‘)"
//局部调用
this.$store.commit(’方法名‘)
//传递参数 == 提交载荷
//action提交的mutations方法
add(context,n){//context相当于对象
  context.commit("方法名",n)
},
add2({commit},n){//context是对象经过结构赋值 {commit,state}
	//commit("方法名",n)
   return new Promise((resolve.reject)=>{
     commit("方法名",n)
     resolve("123")
   })
   //通过Promise进行异步操作
}, 
//通过actions定义的方法触发muations方法，间接改变state的数据
//在actions进行异步操作，在组中如何调用
  
//全局调用mutations方法
按钮点击事件 @click="$store.dispatch("方法名",载荷)"
//局部调用
this.$store.dispatch("方法名",载荷) ==>传递的参数
this.$store.dispatch("方法名",载荷).then(response=>{
  console.log(response)
})

//模块化
新建module文件夹 -- count.js
const state ={  
  //文件夹内设置模块单独的state、getters、mutations、actions、modules
}
const mutations = {
  add(){    
  }
}
export default { //导出设置的模块
  state,
  mutations
}
--shop.js

//在store.js中引入并挂载
import count from "./modules/count"
import shop from "./modules/shop"
const store = new Vuex.Store({
  modules:{
    count,
    shop
  }
})

三.在组件中批量Vuex的属性

用mapState辅助函数, 利用对象展开运算符

import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState(['price','number']);
      	...mapGetters(['total','discountTotal'])
    }，
    methods:{
      ...mapActions({
          setNumber:'SET_NUMBER',
      })
		}
}

四.Vuex中action和mutation区别

• action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态。

• action 可以包含任意异步操作。mutation只能是同步操作。

• 提交方式不同，action 是用this.$store.dispatch('ACTION_NAME',data)来提交。mutation是用this.$store.commit('SET_NUMBER',10)来提交。

• 接收参数不同，mutation第一个参数是state，而action第一个参数是context，其包含了

  {
      state,      // 等同于 `store.state`，若在模块中则为局部状态
      rootState,  // 等同于 `store.state`，只存在于模块中
      commit,     // 等同于 `store.commit`
      dispatch,   // 等同于 `store.dispatch`
      getters,    // 等同于 `store.getters`
      rootGetters // 等同于 `store.getters`，只存在于模块中
  }