vueX

vuex 是为了 vue 应用程序的状态管理模式,集中管理应用所有组件的状态,并且共享组件状态

什么是组件的状态?

组件的状态又可以称为数据，组件内部的状态可以通过props与$emit进行修改，

vuex解决的问题是什么

当组件的结构很复杂，需要跨组件传值时

需要多个组件共同共享状态时

vuex结构

state

负责维护所用到的变量，可以在页面中通过this.$store.state.变量名 的方式访问

不可直接修改

getters

可声明一个变量，通过函数的方式对state的变量进行状态修改后返回，值只会在依赖值进行变化后才会被重新计算，相当于computed

// 来自官网的栗子
state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
getters:{
     doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }

}

页面中通过this.$store.getters.变量名的方式访问

可以返回一个函数，来实现对 getters传参的目的

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2)

mutations

修改state的唯一方法(同步方法)，可通过传参的方式进行修改

 mutations: {
    increment (state,payload) {
      // 变更状态
      state.count=payload
    }
  }

在页面中调用进行修改使用this.$store.commit('increment',payload)

actions

• actions 类似与mutations ，但actions并不直接修改状态，而是通过mutation提交进行修改

• actions可以包含任意异步操作

 actions: {
    ActionIncrement ({commit},payload) {
        //调用mutaions修改状态
      commit('increment',payload)
    }
  }