vuex

vuex主要有这么五个部分，state，getter，mutation，action，module

使用它的场景，中大型项目

安装

yarn add vuex

核心

1，state，store中存储的应用于组件的数据项

存放了所有的数据项，例如管理系统的通用信息userInfo，
获取可以在组件的computed里面，

a，单个数据项获取，

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

b，多个数据项获取，引入mapState

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }  })
}

当映射的计算属性的名称与 state 的子节点名称相同时,computed写法可以如下

import { mapState } from 'vuex'
export default {
  //当映射的计算属性的名称与 state 的子节点名称相同时,computed写法可以如下
  computed: mapState([
    // 映射 this.count 为 store.state.count
    'count'
  ])
}

如果需要定义其它运算符，可以用扩展运算符

 // 如果需要定义其它的计算属性,就按照下面的写法
 computed: {
     // 其他的计算属性
     total() {
         return 500
     },
     ...mapState({
           // 取state里count的值
            count: 'count',
            // 取state里count的值,用countAlias变量接收
            countAlias: 'count',
            // 为了能够使用 `this` 获取局部状态，必须使用常规函数
            fullName(state) {
              return this.addr + state.firstName + state.lastName;
            }
      })
 }

2，getter，应用于需要获取state处理后的数据，类比computed属性

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
    //下面的写法只能取一个
  //1种写法，接受一个state参数
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
  //2种写法，Getter 也可以接受其他 getter 作为第二个参数
  getters: {
    // ...
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
  //3种写法，接受外部传参
  getters: {
    // ...
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  }
})

a，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

3，mutation，改变state的状态值，

const store = new Vuex.store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

调用方式

store.commit ('increment',10)

原有对象添加新属性

Vue.set(obj, 'newProp', 123)

在组件中提交mutations，

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

4，action，提交的是commit，action可以做异步请求

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

触发action，

store.dispatch('increment')

组件中分发action

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

5，module

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态