VueX 的使用,小白一定要看!

  1. 云栖社区>
  2. 博客>
  3. 正文

VueX 的使用,小白一定要看!

avillin 2019-07-16 20:39:36 浏览2619
展开阅读全文

今天主要解决:

1. 什么是vuex?
2. 为什么要用到vuex?
3. 怎么用?

文字比较多,不要嫌繁琐,跟这练习一遍就会了,博主可是一个字一个字写上的。

我们都知道,在做项目时,页面与页面之间要用到传值和通信,都清楚父子通信,兄弟间通信等等。。。
但是有复杂的项目,可能会嵌套很多层,这样一层一层的传值,很麻烦!不光是对代码质量造成了影响,也对代码运行的性能造成了影响,甚至会造成难以排查的bug。

之前给几个小白同学讲个例子:
小朋友想要零花钱,会先和妈妈要,妈妈没有,就去和爸爸要,爸爸把零花钱给了妈妈,妈妈再给了小朋友。
这个就很麻烦了,解决办法,不如直接爸爸把零花钱放在一个指定的位置,谁要,谁就去那个位置拿,这样就方便多了。

所以,vuex就是那个指定的地方,官方给起了个很专业的名字,叫:状态管理模式,说白了,就是一个统一存放状态的地方,谁用里边的值都可以取到,无论页面的层次多深,不用担心拿不到的问题,这样解决复杂通信或传值的问题就很方便了。

用到的地方也有很多:比如页面切换后再回来,依然显示上次搜索条件的结果,或n个组件同时共享一个状态等等……

这些理解了,前两个问题【什么是vuex/为什么要用到vuex】自然就迎刃而解了,接下来讲一下vuex的实现原理,我们先来附上一张第一眼难以理解的官方图片

image

相信很多小白看完这张图片后根本不理解,没关系,我举例说一下:

比如有一个A页面显示了“100”这个数字,并且我可以随意更改,但是需求上,其他BCD三个页面也要显示同样的数字,这个字段改成什么,就显示什么,要求就是要显示的数字一模一样。

那么我就要有个地方,来放这个数据,我们先创建一个js文件,在里边定义一个对象,起名叫state,这个state专门定义这个数据的

const state={
    name : 100
}

然后所有页面都可以显示出这个name,显示后还要有一个可以改的地方,我们同样,在这个js文件中,在定义一个可以写方法的对象叫mutations,它里边专门放方法,如下:

const mutations ={
    addNumber(){
        state.name+=100
    },
    miunNumber(){
        state.name-=100
    }
    }

文件中我写了一个方法叫addNmuber,这个名字随便起,我每次调用这个方法,就可以增加100,这样就实现了所有页面显示的数字,都会增加。
这个mutations中所写的方法,vue要求必须要是同步的,所以这里都写同步的方法,比如加100,或减100,或变颜色等需求都属于同步方法。这样也就是mutations控制了state中某个值的改变。

回到官网图,看下图中上边还有一个actions,actions和mutations是一样的写法,区别在于,actions中要写异步的方法,比如要调用某个异步接口,可以写在这个当中,比如高德地图和百度地图的接口,就是异步请求,页面中要引入一个地图组件,很多页面都公用,就可以写在这个当中。

那么这个异步方法actions有什么用?如果有需求,说必须等待这个接口成功返回一个数值后,再改变state中的值,这时就需要actions中调用一个接口,接口返回后,调用mutations中的方法,来改变state中的值。

const actions = {
actionsAddNumber(context){
  this.axios.get('/接口名').then(()=>{
        context.commit('addNumber')
    })
   }, 
 }

actionsAddNumber名字随便起,它接收一个context参数。其中调用了异步方法,成功用,利用commit触发了mutations中的addNumber方法。
实战当中,我们可以利用ES5的结构赋值,改变一下代码,直接提取context参数中的commit使用,如下:

const actions = {
  // 结构赋值提取commit
actionsAddNumber({commit}){
  this.axios.get('/接口名').then(()=>{
      // 直接使用commit
        commit('addNumber')
    })
   }, 
 }

那么在vue页面使用store.dispatch触发action中的方法:
this.$store.dispatch('actionsAddNumber')

不过注意的是,非大型项目actions并不是必须要用到的,一般state和mutations已足够我们使用。官网也建议,非必须情况下,不建议使用vuex,因为我们需要下载,还要引入,在文件大小和加载上,都是会受到影响的。

回过头来看官网的图片,或许,你就理解了,若面试问到,说一下vuex的实现原理,就按照这个理解,按照官网的图说:
页面中的组件,通过dispatch,来调用actions方法异步加载,成功后,通过commit触发mutations中的某个方法,来改变state中的某个值,这就是原理,最好再加上自己的理解说出来。

接下来说下vuex的用法:

创建项目时,vuex不会自带,因为不是每个项目都需要vuex,所以我们需要下载

npm install vuex --save

创建一个store文件夹,这个名字自己随意起,规范一些起个storeimage

文件夹中放入一个js文件,例如:store.js。

文件中引入vuex,并创建出state、mutations即可(getters本文暂时不讲)。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 定义数据
// state在vuex中是用于储存数据的
const state={
    name : 100
}

// 定义方法 mutation同步
// mutations 里面方的是方法,主要用于改变state中的数据源
const mutations ={
    addNumber(){
        state.name+=100
    },
   }
  
// 实例化 Vuex.store,用到什么引什么,用到actions就引入actions,用到getters就引入getters,本文只用到这两个
const store = new Vuex.Store({
    state,
    mutations
})

export default store;

搞定,vuex建立完成,就这么简单的一个vuex文件写完了,接下来vue页面文件中该使用这个了

首先我们需要找到目录中main.js中引入vuex,把文件目录引入,main.js是什么,不懂的小白要去查查。

import Vue from 'vue'
import router from './router'
import store from './store/store'

new Vue({
  el: '#app',
  router, // 这个要使用
  store, // 这个也要使用
  components: { App },
  template: '<App/>'
})

使用很简单,因为我们在上边的store中实力化了这几个方法(看上边注释),所以我们就需要用this.$store来进入这个文件中,那么我想在页面中显示state中的数字100,如下写法:

<div>{{this.$store.state.name}}</div>

任何一个页面都可以这样引用,引入一个,显示一个。改变值的方法如下:

<button @click="add">增加100</button>
methods:{
    add(){
       this.$store.commit('addNumber')
      },
     }

点击按钮,就会增加数字了,并且改变一个,所有页面上的这个属性,也会跟着改变,多加练习和理解。

当然,我们可以向mutations中,传入数值:

mutations: {
  // 两个参数,一个是state,一个是参数n(也叫payload载荷)
  addNumber(state, n) {
    state.name+= n
  }
}
this.$store.commit('addNumber', 100)

这样就是非固定的写法,可以传入你想要的参数值。

avillin笔记:

1. 能改变state的方法是mutations。
2. 页面中用this.$store.state来获取到state中的某个值。
3. 页面中使用this.$store.commit来调用vuex中mutations里的某个方法。
4. 页面中使用this.$store.dispatch来调用vuex中actions里的某个方法。

网友评论

登录后评论
0/500
评论
avillin
+ 关注