Vuex入门

Vuex入门

一.Vuex简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），

让其在各个页面上实现数据的共享包括状态，并且可操作

​ Vuex分成五个部分：

1.State：单一状态树

2.Getters：状态获取

3.Mutations：触发同步事件

4.Actions：提交mutation，可以包含异步操作

5.Module：将vuex进行分模块

四个JS文件作用

官方图解:

二.Vuex安装

1.在项目目录cmd中输入下列代码

    npm install vuex -S
    npm i -S vuex@3.6.2

2.创建store模块，分别维护state/actions/mutations/getters/ index.js

3.在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

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

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

 import store from './store'

new Vue({
el: '#app',
router,
store, //在main.js中导入store实例
components: {
App
},
template: '<App/>',
data: {
//自定义的事件总线对象，用于父子组件的通信
Bus: new Vue()
}
      })

三.Vuex读取与修改

在state.js中创建值

export default{
    name:'Rachel'
}

在页面中读取方式1:

this.$store.state.name

代码:

<template>
  <div>
    <h1>页面1==={{msg}}</h1>
    <p>State直接取值</p>
<button @click="ff1">State直接取值</button>
  </div>
</template>

<script>
export default {
  name: 'Page1',
  data () {
    return {
      msg: 'Page1'
    }
  },
  methods:{
    ff1(){
     this.msg= this.$store.state.name;
    }
  }
}
</script>

<style>
</style>

效果:

在页面中读取方式2:

在getters.js中定义方法

export default{
      getName:function(state){
        return state.name;
      }
}

在vue文件中使用

ff2(){
     this.msg= this.$store.getters.getName;
    }

效果如上

改变Vuex中的值

在mutations.js中创建方法

export default{
   setName:function(state,payload){
     //载荷
     state.name=payload.name;
   }
}

在vue文件中使用 this.$store.commit(‘setName’,{name:‘Anone’});

ff3(){
     this.$store.commit('setName',{name:'Anone'});
      this.msg= this.$store.getters.getName;
    }

在页面2中显示state.js中name的值,在页面1中改变值后,页面2的值也改变,如图:

异步修改值方法

在actions.js中定义方法

export default{
  setNameAsync:function(context,payload){
     //context指的是vuex的实例
     //等价于this.$store
   setTimeout(function(){
      context.commit('stename',payload)
   },6000);//6秒后调用该事件
   }
}

Vue文件调用

  ff4() {
        this.$store.dispatch('setNameAsync', {
          name: 'Anone-ProPro'
        });
        this.msg = this.$store.getters.getName;
      }

此时将msg的值放入 computed中更容易显示出效果

 computed: {
      msg() {
        return this.$store.state.name;
      }
    }

效果:该事件可以和其他的事件一起进行

四.actions中发送Ajax获取后台数据

在actions中创建方法:

setNameAjax: function(context, payload) {
    let _this=payload._this;//获取vue实例
    let url=_this.axios.urls.VUEX_INFO;
    let params={
      resturantName:'HouTai'
    }
    _this.axios.get(url,{params:params}).then(resp=>{//发送Ajax请求
      if(resp.data.success){//如果成功接受到后台数据则更改name内容
        context.commit('setName',{
          name:resp.data.msg
        });
      }
    }).catch(err=>{

    })
  }

在Vue文件中将Vue实例传到上面的方法中

ff5() {
        this.$store.dispatch('setNameAjax', {
          _this:this
        })
      }

后台接口

package com.ssm.controller;

import com.ssm.util.JsonResponseBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;

@RestController
@RequestMapping("/vuex")
public class VuexController {

    @RequestMapping("/queryVuex")
    public JsonResponseBody<?> queryVuex(HttpServletRequest request) {
        String resturantName = request.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();
        }
        return new JsonResponseBody<>(resturantName + "-" + date,true,0,null);
    }
}

axios中超时时间默认是六秒,所以异步事件不能超过十秒

/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'

//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action

// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;

//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
	data = qs.stringify(data);
	return data;
};
export default axios;

最终效果: