第十三章：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：分割为多个模块
})
网友评论