vuex简单讲解

vue

理解vuex我们先来认识下vue

vue单项数据流.png

Vue是单向数据流，v-model只是语法糖而已。单向数据流就是：数据总是【向下传递】从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据，当尝试在子组件内部修改父组件的数据，vue将报错。主要是为了组件解耦。（假如子组件可以修改父组件数据，那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化，发生连锁反应，所以vue不推荐子组件修改父组件数据，直接修改props会抛出警告）

什么是vuex

vuex就是解决以上问题的解决方案，当多个组件依赖于同一个数据的时候，我们希望其他组件都会随其更新

vuex的工作流程.png

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文件

store.png

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+“欢迎你~”

getter做数据过滤.png

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、甚至是嵌套子模块——从上至下进行同样方式的分割,然后组合到一起：

module.png