先说一个常用的vue辅助工具vue-devtools安装教程。
一、什么是Vuex?为啥要使用它呢?
首先我们假设一个场景:当我们需要一个“常量”,在各个组件之间传播(或者是.vue文件中传播),父组件,子组件,孙组件等5层到6层。当用户打开几个窗口进行数据操作的时候,数据就可能被污染(大中型项目中常见)。这样我们就需要一个控制中心(我叫它“核心前端数据库”)的东西——这也vuex中的store(仓库),它把所有公用的数据和方法,当有“人”要改的时候,就得来我这里修改。
二、简单的demo
1. 新建store.js用来管理状态(也就是vuex)。
/* 仓库文件 */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = { //一般通过外部文件引入的,东西很多的。
//定义数据 --- 类似data
num: 12 //生成了一个静态的常量
}
const mutations = {
//定义方法 --- 类似methods
add(state){//state 是把上面的数据引入进来的
state.num++;
},
minus(state){
state.num--;
}
}
export default new Vuex.Store({
state,
mutations
});
2. 在入口文件main.js中引入
import Vue from 'vue'
import store from './store/store.js' //全局中引入vuex
import App from './App.vue'
new Vue({
el: '#app',
store,
render: h => h(App)
})
3. 在相关组件中使用(此处是App.vue)
<template>
<div id="app">
{{ $store.state.num }} <!-- vue静态的常量 --> <!-- $store是共有的意思 -->
<div class="">
<button type="button" name="buttonAdd" @click="$store.commit('add')">加一个</button><!-- vue2.0 的写法 -->
<button type="button" name="buttonAdd" @click="$store.commit('minus')">减一个</button>
</div>
</div>
</template>
所有.vue文件操作数据的时候都用这种方法就不会讲数据弄混了。
vue-devtools中的vuex对事件的监测,当我们进行操作的时候就会有记录相关信息。
本文github地址
首先我问看下完整的Vuex选项对象
new Vuex.Store({
state, //访问状态对象
mutations, //访问触发状态
getters,
actions
});
//还有一个模块的
export default new Vuex.Store({
modules:{
a:moduleA
}
});
一、 state — 访问状态对象
说明:也就是使用vuex中的数据
1. 直接在组件中使用{{ $store.state.num }}
2. 需要使用数据的组组件(此处是App.vue)中的计算属性
a. 方式一
computed: {
count(){
return this.$store.state.num + ':方式一获取的state数据';//this指的是main.js中的vue实例对象
}
}
b. 方式二,利用mapState
import {mapState} from 'vuex'
computed:mapState({
// es箭头函数写法,好处箭头函数中的this有穿透效果,直接是上上级
// count: state => state.num + ':方式二获取的state数据'
// es5写法
count:function (state) {
return state.num + ':方式二获取的state数据'
}
})
c. 方式三,不对数据进行计算(加工处理),当数据较多的时候,数组形式
computed:mapState([
'counut'//这里必须state中的数据和此模板中的数据一个名字,也就类似组件定义的简写
])
d. 方式四,不对数据进行计算 ,当数据较多的时候,json形式
推荐
computed:mapState({
count:'num'
})
效果如下图:
二、 Mutations— 触发状态
说明:必须用commit触发mutations中的方法
需求:在组件中传入一个值给store.js
<button type="button" name="buttonAdd" @click="$store.commit('add',{a:10})">加一个</button>
const mutations = {
//定义方法 --- 类似methods
add(state,n){//state 是把上面的数据引入进来的
console.log(n);//传入的第二参数的那个对象
state.num+= n.a;
}
}
1. 利用mapMutations引入sotre中的触发状态
<button type="button" name="buttonAdd" @click="add({a:10})">map=>加一个</button><!-- 传值的话只需要在括号里传,但要注意格式 -->
<button type="button" name="buttonAdd" @click="minus">map=>减一个</button>
import {mapMutations} from 'vuex'
//因为方法所以写在组件中的methods中
methods:mapMutations([
'add',
'minus'
])
三、 getters — 获取者
注意:在vue2.x中的computed中不要使用箭头函数,因为箭头函数中的this指的是上一层不是本层。
//组件中
import {mapGetters} from 'vuex'
computed:{
/*count(){
return this.$store.getters.num
}*/
//map对象方式获取getters
...mapGetters({
count:'num'//引进是静态的
})
},
//store.js文件中
const getters = {
num:function (state) {
return state.num;
}
}
export default new Vuex.Store({
state,
mutations,
getters
});
注意:..mapGetters({})
使用了三个点“…”,由于vue-cli生成的依赖包中不能解析此语法,所以需要进行如下配置。
- npm install babel-preset-stage-2 –save-dev
- 在.babelrc文件中加一个配置
["stage-2"]
四、 actions — 异步状态
和Mutations的区别是Mutations是同步状态,Actions是异步状态,可以调用Mutations中的状态,异步的批处理的一个集合。
//组件中
<button type="button" name="buttonAdd" @click="addPlus">addPlus =>加二个</button>
<button type="button" name="buttonAdd" @click="minusPlus">minusPlus</button>
import {mapActions} from 'vuex'
methods:{
...mapMutations([
'add',
'minus'
]),
...mapActions([
'addPlus',
]),
...mapActions({
minusPlus:'minusPlus'
})
}
//store.js中
const actions = {
addPlus(context){//context代表了整个的store
context.commit('add',{a:2}); //每次加2
setTimeout(()=>{
context.commit('minus');
},3000)
console.log('Actions中的加');
},
minusPlus({commit}){//commit
commit('minus')
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
});
五、 module — 模块化
当 state, mutations, getters,actions太多的时候,我们就需要分成不同组别的模块组。
//组件中
A模块组中的num => {{ $store.state.a.numA }}
B模块组中的num => {{ $store.state.b.numB }}
//store.js中
const moduleA ={
state: {
numA: 888
}
}
const moduleB ={
state: {
numB: 666
}
}
export default new Vuex.Store({
modules:{
a:moduleA,
b:moduleB
}
});
最终demo如下图:
作者:datura_lj
链接:http://www.jianshu.com/p/0fcdf380afe7
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。