【SPA项目的Vuex】

前言

本章我们是要以了解Vuex模块的一个组成来进行的，并且能掌握Vuex下的结构以及用法。

但是其实是对之前的代码做一个优化。

---

Vuex的概念

说到底就是优化，优化什么呢 ，

一，父子之间的传值

在我们刚开始接触的时候我们是了解了子父之间的传值。

可以了解一下【Vue模板语法下】

二，总线传值
接下来就是一个总线传值的概念

三，Vuex的使用

所以我们可以看的出Vuex的性能非常好，总线传值有很大的缺陷存在，所以我们本章才会讲解Vuex这个版块。

---

搭建Vuex的模块

一，下载Vuex模块

还是一样安装：npm install vuex -S

二，创建对应文件

需要往里面添加代码的文件：index.js, 其他的根据需要填写

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const store = new Vuex.Store({
 	state,
 	getters,
 	actions,
 	mutations
 })

 export default store

其他的暂时为：

export default{

}

三，挂载到vue实列上

只要挂载成功了，就代表可以使用Vuex了。

---

测试

我们先用一个自己搭建的一个测试，VuexPage1.vue

因为测试的范围比较广，所以就分开测试。

---

state获取变量两种方法(一个无监听，一个监听)

首先我们先在state里面放入一个变量

export default{
  resturantName:'五星餐馆',
  uname:'张飞'
}

---

一，用钩子函数给变量赋值

假设我们的html代码为下面所写的。

<template>
  <div>
    <h3 style="margin: 60px;">第一个vuex界面title内容为:{{title}}</h3>
  </div>
</template>

我们在开始的时候就给它定义一个title变量，
而且在初始化，也就是钩子函数启动的时候给他从state里面获取到值然后赋值给title

<script>
  export default{
    data() {
      return {
        title:''
      }
    },
    created(){
        //1,直接通过访问state库里面的变量来获取变量值.
         this.title  = this.$store.state.resturantName;
        //2,通过引用getters里面写好的get方法来返回变量。
        // this.title = this.$store.getters.getResturantName;
    }


  }
</script>

当然获取值是有两种方法的：
第一种：直接访问state库获取：this.$store.state.resturantName;
第二种：通过使用getters里面的方法获取：this.$store.getters.getResturantName

那么就看看getters里面的方法又是怎么定义的

export default{
  getResturantName:(state)=>{
    return "这是通过getters方法获取到的数："+state.resturantName;
  }
}

参数	说明
state	相对于state库本身

---

二，通过具有监听属性的计算方法获取

获取的方式一样，只不过获取后的赋值不一样

假设我们的html代码为下面所写的。

<template>
  <div>
    <h3 style="margin: 60px;">第二个vuex界面title内容为:{{title}}</h3>
  </div>
</template>

就是下面这样，只不过用到的title不再是一个变量，而是一个计算属性，
因为只有这个计算属性才能监听，
至于为什么要监听，下面修改的时候就会讲到了

<script>
  export default {
    data() {
      return {

      }
    },
    computed: {
      title() {
        //1,直接通过访问state库里面的变量来获取变量值.
        // return this.$store.state.resturantName;
        //2,通过引用getters里面写好的get方法来返回变量。
        return this.$store.getters.getResturantName;
      }
    }

  }
</script>

获取值方式可以参照上面。

效果图其实也没什么看的：

---

state修改变量对有无监听是否有关系

如题，为什么要特意的拿出一个监听的，一个不是监听的呢？

因为这样可以做一个比较，

道理就是，在你需要用到要改变变量的时候，请使用可监听的

第一种：（监听） 在你修改变量值后，仍然可以改变html上面的页面，就是页面上的值会变。
第二种：（不监听） 因为是刚开始的时候，函数赋予的值，可是一改变state库里面的值，也不会改变页面

就会如下：点击无效

---

state修改变量值(一个同步，一个异步)

因为同步和异步可以演示，所以就使用一个页面来进行讲解。

如题，下面的html代码如下

<template>
  <div>
    <h3 style="margin: 60px;">第二个vuex界面title内容为:{{title}}</h3>
    <button @click="change">改变title值为四星餐馆</button>
    <button @click="changeAsync">四个月后改变为四星餐馆</button>
    <button @click="doAjax">doAjax</button>
  </div>
</template>

那么,可以看到下面我定义了三个方法，

change (同步方法调用),
changeAsync（异步方法调用）,
doAjax （Ajax调用）

<script>
  export default {
    data() {
      return {

      }
    },
    computed: {
      title() {
        //1,直接通过访问state库里面的变量来获取变量值.
        // return this.$store.state.resturantName;
        //2,通过引用getters里面写好的get方法来返回变量。
        return this.$store.getters.getResturantName;
      }
    },
    methods: {

      change() { //用同步方法调用(mutation)
        this.$store.commit('setResturantName', {
          resturantName: '用mutations改变的四星餐馆'
        })
      },
      changeAsync() { //用异步方法调用(actions)
        this.$store.dispatch('setResturantNameByAsync', {
          resturantName: '用actios改变的四星餐馆'
        })
      },
      doAjax() {
        this.$store.dispatch('doAjax', {
          _this: this
        })

      }

    }

  }
</script>

---

第一种：change :
在使用的调用的方法为：
this.$store.commit('setResturantName', { resturantName: '四星餐馆' })

那么我们先简单查看一下mutations里面是怎么写的

export default{
  setResturantName:(state, payload)=>{
    state.resturantName = payload.resturantName;
  }
}

参数	说明
state	相对于state库本身
payload	参数集合

不过说起来，调用的方法是两个参数，一个是填入调用方法名，一个是填入参数集合。

其实没必要去纠结，这应该是内置函数而已。commit

---

第二种：changeAsync :
在使用的调用的方法为：
this.$store.dispatch('setResturantNameByAsync', { resturantName: '四星餐馆' })

那么我们先简单查看一下actions里面是怎么写的

export default{
  setResturantNameByAsync:(state,payload)=>{
    console.log("aaa");
    setTimeout(()=>{
      console.log("bbb");
      state.commit('setResturantName',payload);
      // state.resturantName = payload.resturantName;//这个是没办法将state容器里面的值改变的
    },3000);
    console.log("ccc");
  }

}

参数	说明
state	相对于全体Vuex本身！！！
payload	参数集合

注意只要在actions里面，第一个参数就是代表其他的所有，名字是可以随便的

---

第三种：doAjax :
在使用的调用的方法为：
this.$store.dispatch('doAjax', { _this: this })

值得一提的是我们这次传的值不再是单纯的字符串，而是一个this,这代表着我们可以使用VuexPage2.vue里面的axiox这个模块

那么我们先简单查看一下actions里面是怎么写的

export default{

  doAjax: (context, payload) => {
		let _this = payload._this
		let url = _this.axios.urls.SYSTEM_USER_DOLOGIN;
		_this.axios.post(url, {}).then((response)=> {
			console.log(response);
		}).catch(function(error) {
			console.log(error);
		});
	}

}

有了这个模块我们也就可以用到axios了

参数	说明
context	相对于全体Vuex本身！！！
payload	参数集合

注意只要在actions里面，第一个参数就是代表其他的所有，名字是可以随便的

效果图：

---

总结

大部分的内容详细都在上面了，其实异步方法是用来进一步优化的，一般情况下mutaions里面的同步方法就已经够用了。

Thanks♪(･ω･)ﾉ希望对大家有所帮助