Vue.js入门教程（十三）vuex状态管理

2019-10-08 本文已影响0人党云龙

第十三章：vuex状态管理

什么是状态管理？

我相信你跟我一样，看见状态管理这几个字的时候是一个懵逼的状态。
vue内置只处理父子嵌套关系，兄弟组件传值，需要先传给父级，父级再传给兄弟元素。效率是非常低的。
现在有了vuex，问题就全部解决了，vuex相当于一个全局数据统筹和管理的中间件，所有数据全部给vuex，通过调用方法，再从vuex中读取和操作数据。省去了一层层传递的问题。

开始安装

1.http引入方式安装

你可以直接在页面中引入

<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>

这里注意一定不要忘了在加载后，使用use方法让vue装载vuex。

Vue.use(Vuex);

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            <div>{{this.$store.state.myName}}</div>
            <div>{{message}}</div>
        </div>
        
        <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
        
        <script>
            //创建store控制器
            var store = {
              debug: true,
              state: {
                myName: 'Hello!dangyunlong'
              },
              getname(newName){
                  this.state.myName = newName
              }
            }

            //vue加载vuex
            Vue.use(Vuex);

            new Vue({
                el:"#app",
                store:store,
                data:{
                    message:3
                },
                methods: {
            
                },
                mounted: function() {
                    console.log(this.$store.state.myName);
                }
            })
        </script>
    </body>
</html>

2.npm安装方式：

注意：如果你对npm包管理不熟悉，建议你跳过这一章，先阅读后面关于vuecli的使用方法的章节！

cnpm i vuex --save

安装完毕在你的package.json中应该能看到vuex的版本。

vue全家桶

在这里我们主要讲解在vuecli中的使用方法：

因为vuex是基于一个store的，你可以理解它是一个vuex的配置文件。所以我们需要在你项目的src目录新建一个store文件夹，然后在里面新建一个index.js文件。

store文件位置

index.js中这样写：

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

Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        name:"dangyunlong",
        age:"30"
    },
    mutations:{
        gaiming(state,name){
            state.name = name
        }
    }
});

这里state是你要全局共享的属性，mutations是你操作state中属性值的方法。所有的操作理论上都应该通过mutations去操作。

然后老方法，打开main.js！

添加这两个，你肯定会疑惑这个store是什么，不用着急我们后面会解释。
你可以理解这个store其实是一个vuex全局配置文件。

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import App from './App'
import router from './router'
import store from './store'
Vue.use(ElementUI);
//加载axios
Vue.prototype.axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App),
  router,
  store,
  components: { App },
  template: '<App/>'
})

ps：
如果你的配置文件写成了这样，恭喜你已经完成了vue+vuex+axios+vueroute+elementUI+webpack 的终极组合。

好了，接下来我们就该玩一玩了

首先找个页面打印一下this，你就会发现，再this中已经能找到store的内容和方法了。

页面中已经获取到了store中的内容

是不是屌炸天？？
然后你使用

this.$store.state.name

直接就能打印出来内容了。就这么简单。。

打印内容

这里要注意一点，你如果需要修改值，你只能通过我们在mutations中定义的方法去修改。
这可能跟vuex本身的机制有关系，它本来也不属于你这个页面，你当然不能通过this.xx = xx去修改它的内容
必须vuex自带的commit方法

this.$store.commit("gaiming","hupengcheng")

修改内容

原理解析

通常我们在组件和父级之间传递数据是这样写的

this.$emit("updateDate");

然后上一级中再往上一级反馈即可
注意这就是子调父无需props

@updateDate="updateDate"

methods: {
  updateDate(e) {
     this.$emit("updateDate");
  }
},

参数说明：

vuex 完全依赖于一个Store相当于给每一个控制器增加了一个状态池。
vuex主要的作用再于解决多个组件之间复杂的嵌套关系，此刻，传值变得非常困难，你还得一层一层往外传，很难受。
vuex相当于一个代理工具，也叫状态管理工具，你先从A组件中把值传给vuex，在从b组件中调用vuex中存的值即可。

new Vuex.store({
    state：数据状态，类似于data
    mutations：改变状态方法
    getters：过滤数据
    action：同步执行
    module：分割为多个模块    
})