vuex

1. 什么是状态？

• 用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态

2. 什么是状态管理？

• 用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态，这种管理的形式我们称之为 状态管理

3. vuex是做什么的？（概念）

• vuex是一个集中式的存储仓库【状态】，类似于 本地存储、数据库，vuex是vue的状态管理工具，它的功能主要是实现多组件间的状态【数据】共享

4. vuex的组成部分

1. state 状态

   • state 是一个对象，对象中的每一个key ， 就是一个状态

2. action 动作（业务交互）

   • action 是一个对象，对象中的每一个key的value是方法，方法是用来处理业务逻辑
     action 的作用是用来发送一个动作action
     action 发送的动作action 是一个对象，对象中可以有两个参数 type payload
     action中的方法可以有两个参数，分别是store实例中的方法，从视图发来的实际参数
   • 第一个：
     {
     commit: ƒ boundCommit(type, payload, options)
     dispatch: ƒ boundDispatch(type, payload)
     getters: {}
     rootGetters: {}
     rootState: {ob: Observer}
     state: {ob: Observer}
     proto: Object
     }
   • 第二个：
     视图发来的实际参数
     actions 和 mutations 要想沟通， 我们通过 commit 来进行沟通， commit 是发送一个动作
     actions 方法中的动作可以有两个参数 type payload
     type 就是 mutations 中方法的名称

3. type 要求是一个常量，理由：常量比较稳定，安全性高
   payload 就是传递给mutations放发的实际参数

   • type.js文件是用来定义当前项目store中所有的项目的常量
     常量书写严办为大写，或者用_表示

4. mutation 修改state

   • mutations 是一个对象
     mutations 用来修改数据
     mutation 也可以储存方法
     mutation 中的方法名称可以使用常量表示
     mutation 中的方法可以镰鼬多个参数 分别是state , action
     state 是 store中的state
     action 是 action方法中发过来的action

5. getter 获取数据的

   • getters 也是一个对象，用来获取状态
     getters 里面存放的也是方法

6. store state的存储者

   • state是一个对象，保存了对象中的值，每一个对象的key就是一个状态

7. 应用场景

   1. 相对比较大型的应用（状态较多）

8. 判断你的项目是不是应该使用vuex

   1. 当你觉得你的项目不需要vuex的时候，那么就不用
   2. 你觉得需要的时候，就直接使用

9. vuex的使用方案有哪些？（state修改前，state修改后）

   1. 前标准，后标准
   2. 前标准，后非标准
   3. 前非标准，后标准
   4. 前非标准，后非标准

10. 思维流程:
    store.js
    this.$store.commit{(}^{\prime }incremen{t}^{\prime })->mutationsthis.$store.dispatch(‘jia’) -> actions
    mapActions() ->actions mapGetters()->getters

组员 组长 老板 财务 总监 组员
在中间传递的就是工资（数据）
(view）component - dispatch > action -> mutation -> state <- getter <- component
发送请求 处理 修改状态
业务逻辑 修改state 读取state
异步

8. vuex的使用方案有哪些？（state修改前，state修改后）

   1. 前标准，后标准
   2. 前标准，后非标准
   3. 前非标准，后标准
   4. 前非标准，后非标准

9. 问题

   1. 数据的获取写的太长了，冗余
   2. 视图和vuex的交互代码太长了，冗余
   • 解决： Vuex提供了4个辅助工具： mapState mapGetters mapActions mapMutaions
     - mapState 我们可能不常用
   • mapGetters([gettersFnName]) 使用 {{ gettersFnName }}

        new Vue({
          //computed: mapGetters(['getCount']), // 这么写我们的当前组件的自定义计算属性就没有地方放了
          computed: {
            ...mapGetters(['getCount])
          }
        })
     

• mapActions([actionsFnName]) 标准

    new Vue({
      methods: {
        ...mapActions([actionsFnName])
      }
    })
  

• mapMutations([mutationsFnName]) 非标准

      <button @click = "mutationsFnName()"></button>
  

    new Vue({
      methods: {
        ...mapMutations([mutationsFnName])
      }
    })
  

• 以上讲的都是用户交互，没有写数据交互

• vuex 的数据交互

• 注意：

  • vuex的数据交互写在actions里面

• actions.js

  const actions = {
      getDataInfo ( { commit } ) {
        fetch('/data.json')
          .then( res => res.json() )
          .then( data => {
            //获取到数据之后进行动作的创建和发送
            let action = {
              type: 'GETDATAINFO',
              payload: data
            }
            commit( action )

          })
          .catch( error => console.log( error ))
      }
  }

  export default actions

vuex 中的 modules

• store目录中放的是目录

<!-- 目录结构 -->
  store
   -index.js
    home
      state.js
      actions.js
      mutations.js
      getters.js
      type.js
      index.js
    shopcar
        state.js
        actions.js
        mutations.js
        getters.js
        type.js
        index.js
    list
      state.js
      actions.js
      mutations.js
      getters.js
      type.js
      index.js
    user
      state.js
      actions.js
      mutations.js
      getters.js
      type.js
      index.js

 // home  下的 index.js 
     import state from './state'
     import actions from './actions'
     import mutations from './mutations'
     import getters from './getters'
     const homeModule = {
       state,
       actions,
       mutations,
       getters
     }
     export default homeModule
 // store 下的  index.js 
   const store = new Vuex.Store({
     modules: {
       //key: value   // key就是目录名称， value就是目录下的index.js导出的模块
       home: homeModule
     }
   })
   export default store
 ```