一.vuex简介
VueX是适用于在Vue项目开发时使用的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
二.开发中遇到的问题
项目中组件传参的方式 ，来同步data的值，确实很方便。如果业务变得的越来越复杂，项目会逐渐变大，组件的管理和代码的维护 工作量 的问题，变得很头疼。面对此问题，Vuex 的使用会将此问题变的越来越轻松。
三.vuex的原理图
四.安装
1.安装vuex
npm install vuex --save
2.使用
- 在项目根目录下的src文件夹中新建store文件夹，同时新建index.js文件，编写index.js文件如下
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({})
export default store;
- 在src文件夹中的main.js文件中进行修改如下（引入store下的index.js文件，并且将store绑定到全局）
import animate from 'animate.css'
import Vue from 'vue'
import App from './App.vue'
import store from "./store/index"
Vue.config.productionTip = false
Vue.prototype.bus = new Vue();
new Vue({
store,
render: h => h(App),
}).$mount('#app')
Vue.use(animate);
五.Vuex中有五种基本对象
-
1.state 存储数据
存储数据和组件的data类似，只不过data是用来存放组件的私有数据，state用来存放组件之间共享的数据.
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { // 设置全局访问的state对象，记得设置初始值
tableHead: [],
tableList: [],
}
计算属性会监控数据变化，一旦发生改变就会响应，所以我们会在组件的computed中获取state的数据
computed： {
tableHead() {
return this.$store.state.tableHead
}
}
-
2.mapstate辅助函数
一个组件需要获取多种状态时，将这些状态都声明会显得很重复，这时候安利大家使用mapstate辅助函数生成计算属性,记得import { mapState } from "vuex"
computed: {
...mapState({
tableHead: state => state.demo.tableHead,
tableList: state => state.demo.tableList
}),
}
-
3.getters
当我们需要对state的数据进行筛选时可以用到它，可以理解为state的计算属性。一般不常用
-
4.mutations 更改状态，mutation必须是同步函数
在Vuex中，改变状态(state) 的唯一方式是通过提交(commit) 一个mutation。mutations下的函数接收state作为第一个参数，接收payload（载荷）作为第二个参数，载荷是用来记录开发者提交了什么。
mutations: {
updateTableHead( state, obj ) { // 自定义改变state初始值的方法，可以传第二个参数（变量或对象）
state.tableHead = obj;
},
updateTableList( state, obj ) {
state.tableList = obj
},
}
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'XXX'
])
}
}
-
5.actions 异步操作
Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会让mutations帮他提交数据的变更
getTableHeadList({commit}) {
return demo.getTableHead(). then( res => // 调用了接口
commit('updateTableHead',res.data.Model.headList))//{commit}运用了参数解构来简化代码
}
分发Action是通过store.dispatch触发的
store.dispatch('tableHead')
mutations和actions区别:
mutations：同步
mutations: {
increment ( state, n ) {
state.count += n
}
}
store.commit( 'increment',10)
actions：异步
actions: {
updateCount ( store, data ) {
setTimeout(() => {
store.commit( 'updateCount', data.num )
}, data.time)
}
}
this.$store.dispatch( 'updataCount', {
num: 5,
time: 2000
})
moudles：由于使用单一状态树，应用的所有状态会集中到一起。当应用变得非常复杂时，store 的代码就有可能变得非常臃肿。为了解决以上问题，我们可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
参考资料->点击跳转