奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 大前端知识 > vue >

Vuex使用 - 大灰狼的小绵羊哥哥的博客 - C

时间:2017-10-19 21:17来源: 作者:
先说一个常用的vue辅助工具vue-devtools安装教程。一、什么是Vuex?为啥要使用它呢?首先我们假设一个场景:当我们需要一个“常量”,在各个组件之间传播(或者是.vue文件中传播),父

先说一个常用的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生成的依赖包中不能解析此语法,所以需要进行如下配置。

  1. npm install babel-preset-stage-2 --save-dev
  2. 在.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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2019-01-03 18:01

奔三路小程序已改版