Vuejs教程目录:

  1. 从Demo到实例快速上手Vue.js
  2. Vuejs网络请求组件的使用及解决跨域问题
  3. vuejs单文件应用入门
  4. Vue.js单文件项目中使用Vuex:装载工具
  5. Vue.js单文件项目中使用Vuex:数据操作

上一篇文章我们讲了怎么在Vue.js单文件项目里面装载Vuex,这次我们来讲一下怎么使用Vuex。

这里会直接开搞,所以,前期没准备好的人请看上一篇。
我们先在src/vuex/store.js里做一些修改

const state = {
    count: 0
}

const mutations = {
    inc(state, playload) {
        state.count++;
    }
}

就是给state增加了一个count元素,并且初始值为0,然后再mutations里面增加了一个inc方法,这个方法会自带两个参数,一个是state也就是上面那个state对象,一个是playload,这个对象会在下面提到。
然后我们在页面的mounted方法里面增加一些代码

console.log(this.$store.state.count);    //先打印一下初始值
this.$store.commit('inc');
console.log(this.$store.state.count);    //先再打印一下

输出结果分别是1
如果你会使用Vuejs的Chrome插件的话,你会明显看到vuex里面变量的变化情况。
以上是体验一下mutations的使用方法。
接下来我们体验一下actions的用法。
已然修改store.js这个文件

const state = {
    count: 0
}

const mutations = {
    inc(state, playload) {
        state.count++;
    }
}

const actions = {
    inc(state, playload) {
        setTimeout(()=>{
            state.commit('inc');
        }, 3000);
    }
}

然后把之前在mounted里面写的方法修改一下

console.log(this.$store.state.count);    //先打印一下初始值
this.$store.dispatch('inc');
console.log(this.$store.state.count);    //先再打印一下

把commit改成了dispatch。
结果是不是和之前一样?
也就是说actions里面的方法和mutations里面的方法效果是一样的,区别在什么地方呢。
区别在如果你在mutations里面的数据是异步修改的,那么你在debug一个app的时候,变量的修改轨迹无法被记录下来,你会在vuejs的chrome插件中看不到state里面的值被改变过。这就会给debug造成一定的困扰,所以……我的建议是……最好按照官方的要求在mutations里面严格只用同步方法修改state的值,但凡涉及到异步操作的,统统在actions里面处理。
最后我们看一下getter怎么用。
老规矩修改一下store.js的内容

const state = {
    count: 0
}

const mutations = {
    inc(state, playload) {
        state.count++;
    }
}

const getters = {
    count(state) {
        state.count++;
        return state.count;
    }
}

然后把页面里刚刚添加的三行就改成

console.log(this.$store.getters.count)

执行之后我们可以看到,我们并没有进行commit或者dispatch,但是输出来的结果依然是1,这就是在getters里面进行数据获取的前置操作。
以上,就是store.js里面四个对象的使用场景,具体项目里面应该怎么组合,怎么使用,你们自己看着办吧。


哦,对了,忘了提醒。
因为vuex的数据是存储在内存里的,所以,当你页面进行url刷新之后,vuex的数据又会回到初始化的状态。所以,我们在使用中,如果需要长期存储数据的话,关注一下vuex里面数据的持久化,比如说通过localstorage来托管数据之类的。
关于这个数据持久化的用法,我们下一篇再说。