Vuex 编写

1：在src下面新建store目录

2：在store目录下面新建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'


Vue.use(Vuex)     //这里是很重要的额

const state = {
	level: '第一周', //活动周数
	itemNum: 1, // 第几题
	allTime: 0,  //总共用时
	timer: '', //定时器
	
	answerid: [], //答案id
}

export default new Vuex.Store({
	state,
	actions,
	mutations
})

3：在store下面新建action.js文件

export default {
	addNum({ commit, state }, id) {
		//点击下一题，记录答案id，判断是否是最后一题，如果不是则跳转下一题
		commit('REMBER_ANSWER', id);
		if (state.itemNum < state.itemDetail.length) {
			commit('ADD_ITEMNUM', 1);
		}
	},
	//初始化信息
	initializeData({ commit }) {
		commit('INITIALIZE_DATA');
	}
}

4：在store下面新建mutations.js文件  官方建议mutation里面的方法  都用常量来命名

const ADD_ITEMNUM = 'ADD_ITEMNUM'
const REMBER_ANSWER = 'REMBER_ANSWER'
const REMBER_TIME = 'REMBER_TIME'
const INITIALIZE_DATA = 'INITIALIZE_DATA'
export default {
	//点击进入下一题
	[ADD_ITEMNUM](state, num) {
		state.itemNum += num;
	},
	//记录答案
	[REMBER_ANSWER](state, id) {
		state.answerid.push(id);
	},
	/*
	记录做题时间
	 */
	[REMBER_TIME](state) {
		state.timer = setInterval(() => {
			state.allTime++;
		}, 1000)
	},
	/*
	初始化信息，
	 */
	[INITIALIZE_DATA](state) {
		state.itemNum = 1;
		state.allTime = 0;
		state.answerid = [];
	},
}

在使用Vuex的时候   必须在main.js文件里面引入进来

new Vue({
	router,
	store,
}).$mount('#app')

在组件里面使用vuex的状态值和属性的时候   也是需要先引入的

<script>
import { mapState, mapActions } from 'vuex'
export default {
	name: 'itemcontainer',
	data() {
		return {
			itemId: null, //题目ID
			choosedNum: null, //选中答案索引
			choosedId:null //选中答案id
		}
	},

  	/*  一般是采取的第二种方式
    computed: mapState([
	  	'itemNum', //第几题
  		'level', //第几周
  		'itemDetail', //题目详情
  		'timer', //计时器
	]),
    
   */
    computed:{
        ...mapState([
	  	    'itemNum', //第几题
  		    'level', //第几周
  		    'itemDetail', //题目详情
  		    'timer', //计时器
	    ]),
        count:{
            return this.count;
        }
    }, 
  	methods: {
  		...mapActions([
  			'addNum', 'initializeData',
  		]),
  		//点击下一题
  		nextItem(){
  			if (this.choosedNum !== null) {
	  			this.choosedNum = null;
	  			//保存答案, 题目索引加一，跳到下一题
	  			this.addNum(this.choosedId)
  			}else{
  				alert('您还没有选择答案哦')
  			}
  		},
  		//索引0-3对应答案A-B
	  	chooseType: type => {
	  		switch(type){
	  			case 0: return 'A';
	  			case 1: return 'B';
	  			case 2: return 'C';
	  			case 3: return 'D';
	  		}
	  	},
	  	//选中的答案信息
	  	choosed(type,id){
	  		this.choosedNum = type;
	  		this.choosedId = id;
	  	},
	  	//到达最后一题，交卷，请空定时器，跳转分数页面
	  	submitAnswer(){
	  		if (this.choosedNum !== null) {
	  			this.addNum(this.choosedId)
	  			clearInterval(this.timer)
	  			this.$router.push('score')
  			}else{
  				alert('您还没有选择答案哦')
  			}
	  	},
	},
	created(){
		//初始化信息
		if(this.fatherComponent == 'home') {
			this.initializeData();
			document.body.style.backgroundImage = 'url(./static/img/1-1.jpg)';
		}
	}
}
</script>

上面的方法中mutation的方法基本都是在action里面去实现的   但是如果想在组件里面去实现mutation的方法的时候使用的方法是

created(){
      //进入题目页面，开始计时
  		this.$store.commit('REMBER_TIME');
  	}

ps 如果项目比较大的时候  吧所有的属性和方法全部放在一个store里面会感觉很臃肿

这时候可以采用modules的的配置

首先修改配置

const user = {
  namespaced: true,   //使用命名空间
  state: {
    id: 1,
    name: 'zhangsan111'
  },
  mutations: {
    incrementById (state) {
      console.log('id')
      state.id++
    }
  },
  actions: {
    actionA ({commit}) {
      console.log('user')
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit('incrementById')
        }, 1000)
      })
    }
  },
  getters: {
    getName (state) {
      return state.name
    }
  }
}

const app = {
  namespaced: true,
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    actionA ({commit}) {
      console.log('app')
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit('increment')
        }, 1000)
      })
    }
  },
  getters: {
    getCount (state) {
      return state.count
    }
  }
}


export default new Vuex.Store({
  modules: {
    user,
    app
  }
})

在组件里面使用的时候   

methods: {
    // 使用modules actions

    changeCount () {
      //这里是采用module模式下面有命名空间的
      this.$store.dispatch('user/actionA').then((res) => {
        console.log(res)
      })
      /*
        //如果没有命名空间的话  就回去直接在store里面找到相应的方法了，在全部的配置里面去找，
        //找出来多个的话就按照队列的方式全部执行
      this.$store.dispatch('actionA').then((res) => {
        console.log(res)
      })
    */
    }
  }

有时候store的方法不一定完全是在组件里面使用的，有时候也会在路由守卫里面就要去执行了

这时候应该怎么去使用store的方法呢

import Store from '@/store';
//这里也要分modules模式的时候  是否有配置了命名空间了  配置了的话就需要加上命名空间的名字了
router.beforeEach((to, from, next) => {
  Store.dispatch('user/actionA').then((res) => {
    console.log(res)
  })
  next()
})