例子：

 

index.js

import Vue from 'vue'import Vuex from 'vuex'import mutations from './mutations'import actions from './action'import getters from './getters'Vue.use(Vuex)const state = {    userInfo: { phone: 111 }, //用户信息    orderList: [{ orderno: '1111' }], //订单列表    orderDetail: null, //订单产品详情    login: false, //是否登录}export default new Vuex.Store({    state,    getters,    actions,    mutations,})

computed: {            ...mapState([                'orderList',                'login'            ]),        },           mounted(){              console.log(typeof orderList); ==>undefind            console.log(typeof this.orderList)==>object        }

mapState通过扩展运算符将store.state.orderList 映射this.orderList  这个this 很重要，这个映射直接映射到当前Vue的this对象上。

所以通过this都能将这些对象点出来，同理，mapActions, mapMutations都是一样的道理。牢记~~~

 

 

 

import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)export default new Vuex.Store({  state:{    data:'test'  },  getters:{      },  mutations:{  },  actions:{  }})

 

 另外mapState通过扩展运算符将store.state.data映射this.count  这个this 很重要，这个映射直接映射到当前Vue的this对象上。

在钩子函数中可直接 this.count调用

 

当state,mutations,actions数量很多时，在一个文件夹下不方便管理。可把state,getters,mutations,actions分别写在不同文件内，通过export 导出。再在一个文件中引入。

例如：

//state.jsconst state={  count:10}export default state;   //切记记得导出

//getters.jsexport const gets= state => state.count   //这里直接导出 就不用export default              相当于 gets=function(state){
    　　　　　　　　　　　　   return state.count 　　　　　　　　　　　}

//mutations.jsconst mutations={  add(state){    state.count+=1  },  sub(state){    state.count-=1  }}export default mutations;

//actions.jsexport const addactions=(context)=>{  context.commit('add')}export const subactions=(context)=>{  context.commit('sub')}

 

所有文件导出后在一个文件内统一引入

//store文件夹下的store.js import Vue from 'vue'import Vuex from 'vuex'import state from './state.js' //由于上边的getters.js 和actions.js是通过export 导出每一个，import * as getters from './getters.js'import mutations from './mutations.js' import * as actions from './actions.js'Vue.use(Vuex)export default new Vuex.Store({  state,  getters,  mutations,  actions})

使用