VueX

目录

一、Vuex的核心组成

 对于我们为什么要学习Vuex？

二、Vuex版本问题及store.js的使用

1、加载以来 npm install vuex -s下载Vuex最新版本的依赖

2、导入vuex的核心4个组件，然后通过index.js加载进来

3、将vuex对应的index.js文件挂载到main.js的Vue实例中

4、测试Vuex的存储变量的功能

三、Vuex中的存值、取值获取变量值

四、Vuex中的异步同步操作

五、Vuex的后台交互

---

一、Vuex的核心组成

        对于我们为什么要学习Vuex？

Vuex很好的解决前端组件传参的问题，针对当前项目所有的变量进行统一管理，可以理解为前端的数据库

 已知的传参的方式有两种：

1、子传父 $emit     父传子 props

2、总线

相比于总线的优点在于，能够将整个项目的变量进行统一管理

图解：

下面是通过图解的方式介绍Vuex的四个组件

 官方图解：

核心组件Vuex：

    state.js 存储变量
        获取值 this.$store.state.变量值

    Getters.js 获取变量值
        获取值 this.$store.getters.变量的get方法

    mutations.js 改变变量值（同步）
        改变值 this.$store.commit（'同步方法'）

    actions.js 改变变量值（异步）
        改变值 this.$store.dispatch(‘异步的方法’)

    Vuex中默认情况下是不允许使用vue实例，想要请求后台接口，必须将vue实例当初参数从组件那一方传递过来

 

二、Vuex版本问题及store.js的使用

1、加载以来 npm install vuex -s下载Vuex最新版本的依赖

（在这里小编用npm i -S vuex@3.6.2版本的，版本不同的话效果出不来）

 运行此命令，会进行jar包的下载

在Package.js里会出现所下载Vuex版本

 

2、导入vuex的核心4个组件，然后通过index.js加载进来

3、将vuex对应的index.js文件挂载到main.js的Vue实例中

4、测试Vuex的存储变量的功能

 state.js

export default{
	resName:'小計餐館'
}

 Vuexpage1:

<template>
  <div>
    <p>欢迎来到{{msg}}</p>
  </div>
</template>
 
<script>
export default {
  name: 'VuexPage1',
  data () {
    return {
    }
  },
  computed:{
    msg(){
    //  从vuex的state文件中获取值
      return this.$store.state.resName;
 
    }
  }
}
</script>
 
<style scoped>
 
</style>

 router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from "../components/HelloWorld";
import AppMain from "../components/AppMain";
import LeftNav from "../components/LeftNav";
import TopNav from "../components/TopNav";
import Login from "../views/Login";
import Reg from "../views/Reg";
import Articles from "../views/sys/Articles";
import VuexPage1 from "../views/sys/VuexPage1";
 
 
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/sys/Articles',
          name: 'Articles',
          component: Articles
        },
        {
          path: '/sys/VuexPage1',
          name: 'VuexPage1',
          component: VuexPage1
        }
      ]
    }
  ]
})

 

三、Vuex中的存值、取值获取变量值

VuexPage2:

<template>
  <div>
    <p>页面2：欢迎来到{{msg}}</p>
  </div>
</template>
 
<script>
export default {
  name: 'VuexPage2',
  data () {
    return {
    }
  },
 
  computed:{
    msg(){
    //  从vuex的state文件中获取值
    //   return this.$store.state.resName;——>不推荐，不安全
    //  通过getters.js文件获取state.js中定义的变量值
      return this.$store.getters.getResName;
    }
  }
}
</script>
 
<style scoped>
 
</style>

Mutations.js(存值)

export default {
    setResName:(state,payload)=>{
  //  state对象就对应了state.js中的对象
  //  payload载荷 对应的 传递的 json对象参数{name:zs,age:24}
    state.resName=payload.resName;
  }
}

 getters.js（取值）

export default {
  getResName:(state)=>{
    return state.resName;
 
  }
}

注意：我们可以看到内容显示的是欢迎来到小计餐馆

 

点击之后变成KFC

 

 

 Vuexpage2界面也获取到了VuexPage1的变量值

四、Vuex中的异步同步操作

Vuexpage1：

<template>
	<div>
		<p>頁面一：歡迎來到{{msg}}</p>
		<button @click="buy">盤下這個店面</button>
		<button @click="buyAsync">最終的店長</button>
	</div>
</template>

<script>
	export default {
	  name: 'VuexPage1',
	  data () {
	    return {
	    }
	  },
	  methods:{
		buy(){
			// 通過commit方法調用mutations.js文件中定義好的方法
			this.$store.commit("setResName",{
				resName:'KFC'
			});
		},
		buyAsync(){
			this.$store.dispatch("setResNameAsync",{
				resName:'麥當勞',
				_this:this
			});
		}
	  },
	  computed:{
		  // 從VUex的 state文件中獲取值
		 msg(){
			 // return this.$store.state.resName; 不推薦 不安全
			// 通過getter.js文件獲取 state.js中定義的變量值
			 return this.$store.getters.getResName;
			 
		 }
	  }
	}
</script>

<style>
</style>

actions.js:

export default{
	setResNameAsync:(context,payload)=>{
		// 異步修改值 多件事情一起幹  載異步方法中調用了同步方法
		// context:Vuex上下文，相當於this.$store
		
		// 此代碼三秒後執行
		setTimeout(function(){
		context.commit("setResName",payload)
			
		},3000)
		
		
	}
}

 

 

先点击第二个按钮，再点击第一个按钮，时隔3秒

 

 

   Action类似于 mutation，不同在于：

   1.Action提交的是mutation，而不是直接变更状态

   2.Action可以包含任意异步操作

   3.Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性

 

五、Vuex的后台交互

action.js

export default{
	setResNameAsync:(context,payload)=>{
		// 異步修改值 多件事情一起幹  載異步方法中調用了同步方法
		// context:Vuex上下文，相當於this.$store
		
		// 此代碼三秒後執行
		setTimeout(function(){
		context.commit("setResName",payload)
			
		},3000)
		//交互
		let _this = payload._this;
		let url = _this.axios.urls.SYSTEM_MENU_TREE;
		_this.axios.post(url,{}).then(r=>{
			console.log(r);
		}).catch(e=>{
			
		});
	}
}

VuexPage1:

控制台看到数据

 

 Vuex中默认情况下是不允许使用vue实例，想要请求后台接口，必须将vue实例当初参数从组件那一方传递过来

今天的Vuex就分享到这了！！！！