这段时间一直在搞vue相关的项目，期间尝试使用vuex相关的技术，下面是一点点在这方面的总结。
一、什么是vuex
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
二、使用案例（我这里是把vuex配置成全局方法使用）
- 安装vuex
npm install vuex --save - 编写vue文件
一些大型项目会把vuex这部分结构分解的很细致可以参考Vue组件通信深入Vuex，我这里只是做一个示例，就不做细致分解了，只简单了解一下使用。
首先在src文件夹下新建vuex文件夹，而后在vuex文件夹下新建index.js文件。src->vuex->index.js
// /src/vuex/index.js
import Vue from 'vue';
import Vuex from 'vuex';
// 状态数据管理
Vue.use(Vuex)
// 简单的应用
// 1. state
const state = {
userInfo: {}
};
// 2. getters(computed->dataName->getters)
const getters = {
userInfo(state) {
return state.userInfo;
}
};
// 3. actions(dispatch)
const actions = {
// 参数列表：{commit, state}
// state指的是state数据
// commit调用mutations的方法
// 假设userInfoData是调用后台接口得到的数据
getUserInfoData({
commit,
state
}) {
// 跟后台打交道
let userInfoData = ''
// 调用mutaions里面的方法
commit("setUserInfo", userInfoData);
}
};
// 4. mutations(commit)
const mutations = {
// 设置userInfo
setUserInfo(state, info) {
state.userInfo = info;
}
};
const store = new Vuex.Store({
state,
getters,
actions,
mutations
});
export default store;
- 在入口文件main.js中引入vuex
import store from './vuex';
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
- 在组件中使用
vuex总体分为四个方法：①. state (全局变量的数据)；②. getters (用来获取数据的方法)；③. actions (跟后台接口打交道的方法)；④. mutations (存储数据的方法)。
// src/page/index.vue
<template>
<view>
<span>{{userInfo}}</span>
<button type="button" @click="setUserInfo"></button>
<button type="button" @click="updateUserInfo"></button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
computed: {
userInfo: function() {
// 通过vuex的getters方法来获取state里面的数据
return this.$store.getters.userInfo;
}
},
methods: {
updateUserInfo() {
// 通过vuex的actions方法调用后台接口更新state里面的数据
this.$store.dispatch('getUserInfoData');
},
setUserInfo() {
// 通过vuex的mutations方法来设置state里面的数据
this.$store.commit('setUserInfo','testUser');
}
}
}
</script>
<style scoped></style>
至此，vuex的基本应用就总结完毕了，后期会更新更加完整的vuex方面的技术知识。
学会下一次进步，是做大自己的有效法则。
