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()
})