vuex基础

1.vuex是什么？

状态管理模式，集中式存储管理，多组件需要共享状态时使用vuex

1.1状态管理模式

单个组件中的状态管理（单向数据流）

image.png

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    
{{ count }}
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

image.png

注意：Actions不是必须经过的步骤
其中State可以通过Vue Components Commit(提交) Mutations修改（不经过Actions），但是当有异步操作时，Devtools无法跟踪State的状态，这时就需要经过Actions

App.vue

store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    counter: 100
  },
  mutations: {
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  }
})
export default store

mapState

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
    counter: 10
  }
})
export default store

mapState使用对象的形式