Vuex入门与使用案例

目录

一、组件之间的传值方式

1.父子组件

2.非父子组件或父子组件

3.非父子组件或父子组件

二、Vuex介绍

三、Vuex安装与配置

1.下载

 2.配置

 1.在src目录下创建store模块，分别维护state/actions/mutations/getters

 2.在index.js中引入vue和vuex

3. 新建vuex的store实例

4.在main.js中导入并使用store实例

四、Vuex的简单使用

1.创建案例页面

2.往state.js中加入全局数据

3.调用state.js中的数据

常规方式：

推荐方式：

五、同步更新数据（mutations）

六、异步更新数据（actions）

1.静态异步

2.动态异步

1.准备后台数据

2.配置路径

3.action.js

4.给doDynamicAction添加事件

七、Vuex实现菜单栏折叠

1.定义一个全局数据

2.把这个数据加入到getter中

3.加到mutation中

 4.按钮与它的点击事件

5.菜单栏的收缩

6. 让菜单栏的页面也收缩

---

我们在上...上篇搭建首页导航与左侧菜单栏时用的是props，this.$emit来进行组件传值的，今天我们利用vuex给他们重写一遍

一、组件之间的传值方式

1.父子组件

   父组件-->子组件，通过子组件的自定义属性：props
   子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...);

2.非父子组件或父子组件

   通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...)

3.非父子组件或父子组件

更好的方式是在vue中使用vuex

   方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。
   方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

二、Vuex介绍

官方解释：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作

Vuex分成五个部分：

1. State：单一状态树
          state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。
    
2. Getters：状态获取
          getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。
    
3. Mutations：触发同步事件
          更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
    
4. Actions：提交mutation，可以包含异步操作
          action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action，则需要执行store.dispatch
    
5. Module：将vuex进行分模块
          module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。

三、Vuex安装与配置

1.下载

npm install vuex -S

上面是默认下载vuex最新版本

需要下载指定版本只需在vuex后面加上@与版本号

例如：

npm install [email protected] -S

 2.配置

 1.在src目录下创建store模块，分别维护state/actions/mutations/getters

 

 2.在index.js中引入vue和vuex

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

Vue.use(Vuex)

//分别导入其他相应模块（state/getters/actions/mutations）
import state from '@/store/state'
import getters from '@/store/getters'
import actions from '@/store/actions'
import mutations from '@/store/mutations'

分别导入其他相应模块state/actions/mutations/getters

3. 新建vuex的store实例

//在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块
const store = new Vuex.Store({
  state,    // 共同维护的一个状态，state里面可以是很多个全局状态
  getters,  // 获取数据并渲染
  actions,  // 数据的异步操作
  mutations,  // 处理数据的唯一途径，state的改变或赋值只能在这里
})

4.在main.js中导入并使用store实例

import store from '@/store'                //vuex
new Vue({
  el: '#app',
  router,
  store,                                   //在main.js中导入store实例
  components: { App },
  template: ''
})

四、Vuex的简单使用

1.创建案例页面

page1.vue:

page2.vue:

2.往state.js中加入全局数据

export default{
  yourname:'名字',
}

3.调用state.js中的数据

常规方式：

//上面div中加入插值
{{yourname}}
    
//script
  export default{
    name:'page1',
    data:function(){
      return{
        ts:new Date().getTime()
      }
    },
    methods:{

    },
    computed:{
      yourname:function(){
        //不建议
        return this.$store.state.yourname;
      }
    }
  }

效果：

按照我们常规的方法就是找到state然后拿到里面的yourname属性

这个方法没错但是不建议使用

推荐方式：

 在getter.js中获取数据并渲染

export default {
  gettername: (state) => {
    return state.yourname;
  },
}

page2.vue中获取getter里面的值：

效果：

这种方式比上面的方法更复杂，因为它多走了一个getter,然后在获取getter里面的值，

但是还是推荐使用这种方法

五、同步更新数据（mutations）

处理数据的唯一途径，state的改变或赋值只能在这里

设置mutation.js数据

export default {
  // mutations:处理数据的唯一途径，state的改变或赋值只能在这里
  // type(事件类型)： 其值为setterName
  // state:数据状态的定义
  // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器 传递json对象
  setterName: (state, payload) => {
    state.yourname = payload.name;
  },
}

 给页面加个按钮

Mutations同步方法
Actions异步方法
Actions动态异步方法

 给doMutations添加事件：

    methods:{
      doMutations:function(){
        //错误方式：
        /* this.$store.mutations.setterName({
          name:'XXX'
        }); */

        //正确方式
        this.$store.commit('setterName',{
          name:'海害嗨',
        });
      },
    },

 效果：

六、异步更新数据（actions）

1.静态异步

    methods:{
      doMutations:function(){
        //错误方式：
        /* this.$store.mutations.setterName({
          name:'XXX'
        }); */

        //正确方式
        this.$store.commit('setterName',{
          name:'海害嗨',
        });
      },
    },

定义actions.js:

export default {
  //action:是异步数据的更改方式，本质上还是mutation来更改数据
  //payload:用于承载数据的容器，就是json
  //comtext:上下文
  setyourNameStatic: function(context, payload) {
    setTimeout(() => {
      context.commit('setterName', payload); //Action提交的是mutation
    }, 3000);
  },
}

 给doStaticAction定义事件：

    methods:{
      doMutations:function(){
        //错误方式：
        /* this.$store.mutations.setterName({
          name:'XXX'
        }); */

        //正确方式
        this.$store.commit('setterName',{
          name:'海害嗨',
        });
      },
      doStaticAction:function(){
        this.$store.dispatch('setyourNameStatic',{
          name:'来了宝贝'
        });
      },
    },

效果：

 点击按钮等三秒就出现了

2.动态异步

1.准备后台数据

public class VuexAction extends DispatcherAction {
	
	private ObjectMapper mapper=new ObjectMapper();

	public String queryVuex(HttpServletRequest req,HttpServletResponse resp)
		throws ServletException,IOException{
		
		String resturantName=req.getParameter("resturantName");
		
		SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String date=sdf.format(new Date());
		try {
			System.out.println("模拟异步情况，睡眠6秒，不能超过10秒，axios超时时间设置的是10秒！");
			Thread.sleep(6000);
			System.out.println("睡醒了，继续...");
		} catch (Exception e) {
			e.printStackTrace();
		}
		Map json=new HashMap();
		json.put("msg",  resturantName+"-"+date);
		mapper.writeValue(resp.getOutputStream(),json);
		return null;
	}
}

2.配置路径

'VUEX_ALL':'/vuexAction.action',//vuex测试接口

3.action.js

export default {
  //action:是异步数据的更改方式，本质上还是mutation来更改数据
  //payload:用于承载数据的容器，就是json
  //comtext:上下文
  setyourNameStatic: function(context, payload) {
    setTimeout(() => {
      context.commit('setterName', payload); //Action提交的是mutation
    }, 3000);
  },
  setyourNameDynamic:function(context, payload) {
    //获取this
    let _this=payload._this;
    //获取请求路径
    let url=_this.axios.urls.VUEX_ALL;
    //定义请求参数
    let params={
      methodName:'queryVuex',
      resturantName:payload.name
    }
    //发起ajax请求
    _this.axios.post(url,params).then(resp=>{
      let data=resp.data;
      console.log(data);
      context.commit('setterName',{
        name:data.msg
      })
    }).catch(err=>{
      console.log(err);
    });
  },
}

4.给doDynamicAction添加事件

    methods:{
      doMutations:function(){
        //错误方式：
        /* this.$store.mutations.setterName({
          name:'XXX'
        }); */

        //正确方式
        this.$store.commit('setterName',{
          name:'海害嗨',
        });
      },
      doStaticAction:function(){
        this.$store.dispatch('setyourNameStatic',{
          name:'来了宝贝'
        });
      },
      doDynamicAction:function(){
        this.$store.dispatch('setyourNameDynamic',{
          name:'来了宝贝----02',
          _this:this
        });
      }
    },

 因为在action.js中不能使用this,所以我们把this作为参数传到action.js中

效果：

七、Vuex实现菜单栏折叠

1.定义一个全局数据

export default{
  yourname:'名字',
  collapsed:false,
}

 菜单栏的折叠是通过ture与false控制的

2.把这个数据加入到getter中

export default {
  gettername: (state) => {
    return state.yourname;
  },
  getcollapsed:(state)=>{
    return state.collapsed;
  }
}

 为了在组件中获取到state里面的数据

3.加到mutation中

export default {
  // mutations:处理数据的唯一途径，state的改变或赋值只能在这里
  // type(事件类型)： 其值为setterName
  // state:数据状态的定义
  // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器 传递json对象
  setterName: (state, payload) => {
    state.yourname = payload.name;
  },
  setcollapsed:(state)=>{
    state.collapsed=!state.collapsed;
  }
}

在点击收缩按钮的同时要把数据也改变

 4.按钮与它的点击事件

 按钮：

首页导航(TopNav.vue)中点击按钮的同时使用三元运算符改变图片

//定义一个有图片的按钮

	

 

 获取全局数据与按钮的单击事件：

5.菜单栏的收缩

在Mian.vue中获取全局数据控制菜单栏的收缩

但是我们发现一个问题：

        他好像收缩了又好像没缩 

6. 让菜单栏的页面也收缩

找到左侧菜单栏页面LeftAside.vue

然后获取数据改变中的collapse属性让他实现真的收缩

  博主水平有限，难免有错。欢迎评论交流