Vue学习碎片之状态管理VueX

Vuex介绍

• 对于组件化开发来说，大型应用的状态往往跨越多个组件。在多层嵌套的父子组件之间传递状态已经十分麻烦，而Vue更是没有为兄弟组件提供直接共享数据的办法
• 基于这个问题，许多框架提供了解决方案——使用全局的状态管理器，将所有分散的共享数据交给状态管理器保管，Vue也不例外
• Vuex是一个专为Vue.js应用程序开发的状态管理库，采用集中式存储管理应用的所有组件的状态
• 简单地说，Vuex用于管理分散在Vue各个组件中的数据
• 安装：npm install vuex@next

状态管理

• 每一个Vuex应用的核心都是一个store，与普通的全局对象不同的是，基于Vue数据与视图绑定的特点，当store中的状态发生变化时，与之绑定的视图也会被重新渲染
• store中的状态不允许被直接修改，改变store中的状态的唯一路径就是显式地提交（commit）mutation，这可以让我们方便地跟踪每一个状态的变化
• 在大型复杂应用中，如果无法有效地跟踪到状态的变化，将会对理解和维护代码带来极大的困扰
• Vuex中有5个重要的概念：State、Getter、Mutation、Action、Module
  
  Vue组件通过读取State里的属性进行渲染，组件如果需要去加载网络数据就需要通过Dispatch去触发Actions，拿到新的数据之后需要修改State里的属性，这时就需要提交给Mutation，通过Mutation去修改State
  • State：用于维护所有应用层的状态，并确保应用只有唯一的数据源
    • 在组件中，可以直接使用this.$store.state.count访问数据，也可以先用mapState辅助函数将其映射下来

  // 创建一个新的store实例
  const store = createStore({
    state(){
      return{
        count:0
        }
      },
      mutations:{
        increment(state){
          state.count++
        }
      }
  })
  

  这是一个Vue3的代码
  • Mutations：提供了修改State状态的方法
  • Getter：维护由State派生的一些状态，这些状态随着State状态的变化而变化
    • 在组件中，可以直接使用this.$store.getters.doneTodos，也可以先用，mapGetter辅助函数将其映射下来

  const store = createStore({
    state:{
      todos:[
       { id: 1, text: '...', done: true},
       {id: 2, text: '...', done: false}
      ]
    },
    getters: {
      doneTodos: (state) => {
        return state.todos.filter(todo => todo.done)
      }
    }
  })
  

  过滤出已完成的todos列表记录
  • Action
    • 类似Mutation，不同在于Action不能直接修改状态，只能通过提交Mutation来修改，Action可以包含异步操作
    • 在组件中，可以直接使用this.$store.dispatch(‘xxx’)分发action，或者使用mapActions辅助函数先将其映射下来

  	const store = createStore({
    state(){
      return{
        count:0
        }
      },
      mutations:{
        increment(state){
          state.count++
        }
      },
      actions:{
        increment(context){
          context.commit('increment')
        }
      }
  })