Vuex入门

一、vuex

1.1 什么是vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 +
库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.2 安装vuex

• vue2对应的版本是vuex3
• vue3对应的版本是vuex4

npm i -S vuex@3.6.2

1.3 vue的四个核心js文件

• state：相当于数据存储的地方
• getters：类似于get方法
• mutation：是一种同步的set方法
• actions：是一种异步的set方法
  

1.4 什么情况下该用vuex

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的
store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex
将会成为自然而然的选择。

二、四个核心js文件的使用

2.1 在src文件夹下创建store目录

再将四个核心js文件导入index.js文件中

再将store目录导入main.js中

2.2 在state.js中存入值

export default{
  name:'双层牛肉芝士汉堡'
}

2.3 vuex取值方式

2.3.1 state直接取值

page1.vue代码：

<template>
  <div>
    <h1>这是页面一===={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">点击state直接取值</button>
  </div>
</template>

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

<style>
</style>

page2.vue代码：

<template>
  <div>
    <h1>这是页面二===={{msg}}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: null
      }
    },
    created() {
      this.msg = this.$store.state.name;
    }
  }
</script>

<style>
</style>

效果展示：

2.3.2 getters取值

getters.js代码：

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

page1.vue代码：

<template>
  <div>
    <h1>这是页面一===={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">点击state直接取值</button>
    <p>getters取值</p>
    <button @click="func2">点击getters取值</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: null
      }
    },
    methods: {
      func1() {
        this.msg = this.$store.state.name;
      },
      func2() {
        this.msg = this.$store.getters.getName;
      }
    }
  }
</script>

<style>
</style>

效果展示：

2.4 vuex修改数据

2.4.1 mutations同步修改数据

mutations.js代码：

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

page1.vue代码：

<template>
  <div>
    <h1>这是页面一===={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">点击state直接取值</button>
    <p>getters取值</p>
    <button @click="func2">点击getters取值</button>
    <p>mutations修改值</p>
    <button @click="func3">点击mutations修改值</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: null
      }
    },
    methods: {
      func1() {
        this.msg = this.$store.state.name;
      },
      func2() {
        this.msg = this.$store.getters.getName;
      },
      func3() {
        this.$store.commit('setName', {
          name:'土豆泥'
        });
      }
    }
  }
</script>

<style>
</style>

效果演示：

2.4.2 actions异步修改数据

actions.js代码：

export default {
  setNameAsync: function(context, payload) {
    // context指的是vuex的实例
    // 等价于this.$store
    setTimeout(function(){
      context.commit('setName', payload);
    }, 6000);
  }
}

page1.vue代码：

<template>
  <div>
    <h1>这是页面一===={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">点击state直接取值</button>
    <p>getters取值</p>
    <button @click="func2">点击getters取值</button>
    <p>mutations修改值</p>
    <button @click="func3">点击mutations修改值</button>
    <p>actions修改值</p>
    <button @click="func4">点击actions修改值</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    computed: {
      msg() {
        return this.$store.state.name;
      }
    },
    methods: {
      func1() {
        this.msg = this.$store.state.name;
      },
      func2() {
        this.msg = this.$store.getters.getName;
      },
      func3() {
        this.$store.commit('setName', {
          name: '土豆泥'
        });
      },
      func4() {
        this.$store.dispatch('setNameAsync', {
          name: '土豆泥-原味'
        });
      }
    }
  }
</script>

<style>
</style>

效果展示：

• 先点击actions修改值按钮
  

• 在中途点击mutations修改值按钮
  

• 等待六秒之后

三、actions发送ajax请求获取后台数据

3.1 添加action.js里的url接口

'VUEX_INFO': '/vuex/queryVuex', //vuex异步获取数据

3.2 添加actions.js里的方法

export default {
  setNameAsync: function(context, payload) {
    // context指的是vuex的实例
    // 等价于this.$store
    setTimeout(function() {
      context.commit('setName', payload);
    }, 6000);
  },
  setNameAjax: function(context, payload) {
    let _this = payload._this;
    let url = _this.axios.urls.VUEX_INFO;
    let params = {
      restaurantName: '麦当劳'
    }
    _this.axios.get(url, {
      params: params
    }).then(resp => {
      if (resp.data.success) {
        context.commit('setName', {
          name: resp.data.msg
        });
      }
    }).catch(err => {

    })
  }
}

3.3 添加page1.vue里的方法

代码展示：

<template>
  <div>
    <h1>这是页面一===={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">点击state直接取值</button>
    <p>getters取值</p>
    <button @click="func2">点击getters取值</button>
    <p>mutations修改值</p>
    <button @click="func3">点击mutations修改值</button>
    <p>actions修改值</p>
    <button @click="func4">点击actions修改值</button>
    <p>actions后台Ajax修改值</p>
    <button @click="func5">actions后台Ajax修改值</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    computed: {
      msg() {
        return this.$store.state.name;
      }
    },
    methods: {
      func1() {
        this.msg = this.$store.state.name;
      },
      func2() {
        this.msg = this.$store.getters.getName;
      },
      func3() {
        this.$store.commit('setName', {
          name: '土豆泥'
        });
      },
      func4() {
        this.$store.dispatch('setNameAsync', {
          name: '土豆泥-原味'
        });
      },
      func5() {
        this.$store.dispatch('setNameAjax', {
          _this: this
        });
      }
    }
  }
</script>

<style>
</style>

3.4 展示后端接口代码

package com.zking.ssm.controller;

import com.zking.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 restaurantName = request.getParameter("restaurantName");
        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<>(restaurantName + "-" + date,true,0,null);
    }
}

3.5效果展示

• 等待六秒之后