Vuex
Vue中组件之间传值若无法保存需要管理的状态值，一旦某个组件的状态值被修改，所有应用该值的地方就需要自动更新。这里的状态可以理解为data中保存的属性，是需要共享给其他组件使用的部分。也就是说将需要通向data属性使用vuex进行统一集中式管理。简单地比喻可认为Vuex就像银行卡的功能 - 存钱取钱。
安装配置
$ npm i -S vuex
import Vue from "vue";
import Vuex from "vuex";
//将Vuex注入到Vue根实例中
Vue.use(Vuex);
数据管理模式
开发应用程序时会分解出很多组件进行开发，各个组件之间在路基上或多或少都存在关系，因此组件之间的通信就成为待解决的问题。以往试图采用事件广播的方式，但随之而来的问题，随着组件不断扩展变化，事件会变得越来越复杂，越来越无法预料，以至于越来越难以调试。因此数据管理模式应运而生。
例如：A、B、C三个组件，B是A的子组件、C是B的子组件。在不引入数据管理模式之前，组件C要想获取组件A的数据就必须先由组件A传递给组件B，再由组件B传递给组件C。组件树变得复杂，这种看似严谨的父子结构也就严格的限制了数据的流动方式。
组件关系
数据管理模式
采用数据管理模式后，会将所有的数据统一交给全局store仓库管理，组件A和组件C可以直接修改store仓库中的数据，并通过mapState从store仓库中抓取所需数据到自己的数据中。组件B如果对组件A和组件C的数据毫无兴趣，则可以做到完全的解耦。
典型的状态自管理应用包含三个部分，分别是state、views、actions。
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
| 元素 | 名称 | 描述 | 范例 |
|---|---|---|---|
| state | 状态 | 驱动应用的数据源 | count |
| view | 视图 | 以声明方式将state映射到视图 | template |
| actions | 动作 | 响应在view上的用户输入导致的状态变化 | increase |
单向数据流
随着数据管理模式的发展和演化最后形成了单向数据流，单向数据流要求各个组件间的数据走向永远是单向的、可预期的。不能直接改变store中的状态。改变store中的状态唯一途径是显式地提交Actions。使得可以方便地跟踪每个状态的变化，从而更好地了解应用。
单向数据流
Vuex是单向数据流的最佳实践者，Vuex是一个专门为Vue.js应用程序开发的状态管理模式。Vuex的基本思想是单向数据流。
状态管理模式
仓库store
每个Vuex应用的核心是store仓库，store是一个容器，包含着应用中大部分状态state。简单来说，就是将多个组件通用的数据提取出来作为公共部分，放到一个叫做store的仓库里面进行统一管理，其后在需要使用的组件里直接从store中获取。
Vuex和单纯的全局对象有所不同
- Vuex的状态存储是响应式的，当Vuex组件从store仓库中读取状态时，如果store仓库中的状态发生变化，那么相应的组件也会随之得到高效地更新。
- 不能直接改变store仓库中的状态，改变store仓库中的状态的唯一途径是显式地commit提交mutation。使得方便地跟踪每个状态的变化，从而实现借助工具帮助更好地了解应用。
Vuex通过store选项提供了一种机制将状态从根组件注入到每个子组件中
$ vim src/store/index.js
const Vue = require("vue");
const Vuex = require("vuex");
Vue.use(Vuex);
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state:{
},
mutations:{
},
getters:{
},
actions:{
}
});
Vuex中有默认的5种基本的对象
| 对象 | 描述 |
|---|---|
| state | 存储状态变量，可视为通用的data，其中的属性是响应式的，当属性发生改变时state会动态响应。 |
| getters | 对数据获取之前的再次编译，可理解为state的计算属性。可根据getter或state计算返回。 |
| mutations | 修改状态方法，是改变store中状态的执行者，只能同步操作。 |
| actions | 异步操作方法 |
| modules | store的子模块 |
$ vim src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from "./store";// 引入状态管理 store
/*
import Vconsole from "vconsole";
const vconsole = new Vconsole();
Vue.use(vconsole);
*/
import Ajax from "./utils/ajax";
Vue.use(Ajax);
Vue.config.productionTip = false;
new Vue({
router,
store,//注册store: 把 store 的实例注入所有的子组件
render: h => h(App)
}).$mount('#app');
- 在组件中通过
this.$store来使用store实例
vuex && axios
使用接口获取数据
$ vim /src/store/index.js
import Vue from "vue";
import Vuex from "vuex";
import api from "@/utils/api";// 导入api接口
Vue.use(Vuex);
export default new Vuex.Store({
state:{
user:{}
},
getters:{
user:state=>state.user
},
actions:{
getUser(context, params){
api.user(params).then(res=>{
if(res.status !== 200){
}
const ret = res.data;
if(ret.code !== 200){
}
const data = ret.data;
context.state.user = data;
context.commit("getUser", data);
});
}
},
mutations:{
getUser(state, data){
state.user = data;
}
},
});
个人中心组件触发接口获取数据
$ vim /src/views/User.vue
<script>
export default {
created(){
const id = 1;
this.getUser(id);
},
computed:{
user(){
return this.$store.getters.user;
}
},
methods:{
getUser(params){
this.$store.dispatch("getUser", params)
}
}
}
</script>
个人资料页面从store中获取数据
$ vim /src/view/Profile.vue
<script>
export default{
computed:{
user(){
return this.$store.state.user;
}
},
}
</script>
状态state
状态state是用来存放组件之间共享的数据，跟组件中data选项类似，只不过data选项是用来存放组件的私有数据。
Vuex使用单一状态树，即使用一个对象包含了全部的应用层级状态。以便作为唯一数据源SSOT而存在。单一状态数让我们能够直接定位任意特定的状态片段，在调试过程中能够轻易地获取到整个当前引用状态的快照。
vuex中的数据源是需要保存的数据，页面中可通过 this.$store.state 获取自定义的数据。
vue cli 3中vuex默认只是用一个store.js文件代替原来的store文件夹中的三个js文件state、mutation、action以及getters用法等。
