vue
理解vuex我们先来认识下vue
Vue是单向数据流，v-model只是语法糖而已。单向数据流就是：数据总是【向下传递】从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据，当尝试在子组件内部修改父组件的数据，vue将报错。主要是为了组件解耦。（假如子组件可以修改父组件数据，那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化，发生连锁反应，所以vue不推荐子组件修改父组件数据，直接修改props会抛出警告）
什么是vuex
vuex就是解决以上问题的解决方案，当多个组件依赖于同一个数据的时候，我们希望其他组件都会随其更新
vuex中的一些知识点
1.store是响应的
2.state：vuex的唯一数据源
3.mutation：类似事件，每个mutation都有一个事件类型（type）和一个回调函数。
mutation用于维护同步操作
4.action：和mutation类似
不同点：
Action 提交的是 mutation，而不是直接变更状态。（为了vue调试工具devtools可以追踪每一步操作的状态）
action还可以进行异步操作
5.gettter：store中派生状态，可以认为是store的计算属性
6.module：当应用变得比较复杂时候，store对象有可能变的相当臃肿。在此情况下，vuex允许将store分割成模块（module），每个模块有自己的state，mutation，action，getter甚至是嵌套子模块等（不推荐嵌套太深，可能存在迭代操作繁琐问题）
具体操作
1.项目开始在src下创建store文件夹，用于存放vuex文件2.新建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' // 导入响应的模块，*相当于引入了这个组件下所有导出的事例
import * as actions from './actions'
import * as mutations from './mutations'
Vue.use(Vuex)
// 首先声明一个需要全局维护的状态 state,比如 我这里举例的name
const state = {
name: '' // 默认值
}
// 注册上面引入的各大模块
const store = new Vuex.Store({
state, // 共同维护的一个状态，state里面可以是很多个全局状态
getters, // 获取数据并渲染
actions, // 数据的异步操作
mutations // 处理数据的唯一途径，state的改变或赋值只能在这里
})
export default store // 导出store并在 main.js中引用注册。
3.新建action.js
给action注册事件处理函数。当这个函数被触发时候，将状态提交到mutations中处理
//原始写法
export function modifyBName({commit}, name) {
return commit ('modifyBName1', name)
}
// ES6精简写法
export const modifyAName = ({commit},name) => commit('modifyAName1', name)
//异步方法()
4.mutation.js
方法只接收两个参数，第一个state，第二个参数又称载荷，如果参数多可传对象
export const modifyAName1 = (state,name) => {
state.name = name;//改变state上的那么属性，为新的name
}
Mutation 需遵守 Vue 的响应规则
注意事项：
最好提前在 store 中初始化好所有所需属性。
当需要在对象上添加新属性时，
应该使用 Vue.set(obj, 'newProp', 123),
或者以新对象替换老对象。
利用对象展开运算符...,可以这样写：
state.obj = { ...state.obj, newProp: 123 }
5.getter.js
当state的值不能满足需求，需要用到复杂的值可以进行运算，getter就像计算属性一样，返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
// 获取最终的状态信息
export const resturantName = state => state.name+“欢迎你~”
6.main.js中全局注册store
这样在任何文件都可以直接this.$store.state.xx引用数据了
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, // 这样就能全局使用vuex了
components: { App },
template: '7.原始调用方法
/*payLoad 所有的参数对象 {a:aa,b:bb}*/
/*调用mutation方法*/
this.$store.commit("mutationsFun", payLoad)
/*调用action 方法*/
this.$store.dispatch("ActionsFun",payLoad)
module
modules 用来Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割,然后组合到一起：