vuex基础知识：state，mutations，actions，getters

官方介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。总结：vuex是一个集中式管理组件依赖的共享数据的工具，可以解决不同组件数据共享问题。

vue的引入:
可以在使用脚手架手动创建项目的时候就选中vuex，会自动引入。或者：

npm install vuex --save    //安装

import Vue from 'vue'
import App from './App.vue'
//引入vuex
import Vuex from 'vuex' 

Vue.config.productionTip = false
//注册vuex
Vue.use(Vuex)
const store = new Vuex.Store({
  // 实例化vuex的构造参数 
})

new Vue({
  // 通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到
  store,
  render: h => h(App)
}).$mount('#app')

vuex核心：state，mutations，actions，getters，modules

 图片来自黑马课程

• state
  state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中。下面就是定义了一个存储数字的count。

  const store = new Vuex.Store({
    state: {
      // 管理数据
      count: 0
    }
  })

  我们怎样在其他组件使用state里面的值呢？
  主要是两种方式：
          1.原始形式
          组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count， 如下：

  <!-- 通过this.$store.state.count使用 -->
  <!-- 使用插值表达式获取，省略this -->
  <div>{{$store.state.count}}</div>

          2.辅助函数 mapState
          mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便用法

  import {mapState} from 'vuex'
  export default {
    computed: {
  //利用**展开运算符**将导出的状态映射给计算属性
      ...mapState(['count'])
    }
  }

  然后直接当作计算属性使用:

  <!-- 使用插值表达式获取 -->
  <div>{{count}}</div>

  我们怎样修改count的值呢？

  • mutations
    ​​
            使用mutations修改state里面的数据。state数据的修改只能通过mutations，并且一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步。

    const store = new Vuex.Store({
      // 实例化vuex的构造参数
      state: {
        count: 0
      },
      // 通过mutation操作state里面的值,同步操作
      mutations: {
    //定义一个让count增加的方法，每次增加多少要传递参数
        add (state, num) {
          state.count += num
        },
    //定义一个让count减少的方法，每次减少多少要传递参数，以对象的形式传递。
        sub (state, payload) {
          state.count -= payload.num
        }
      }
    })

        mutations里面存放修改state数据的方法。方法的第一个参数是store里面的state属性。我们可以在state上面找到我们存放的数据；方法的第二个参数是payload（参数名字也可以自己重命名），载荷，调用mutaiions的时候，可以传递参数，任何形式的参数都可以。官方推荐大多数情况下payload应该是一个对象，因为包含多个字段时使用对象形式更清晰已读。

然后我们在其他组件中使用：
        1.原始形式：

<div @click="$store.commit('add',2)">点击每次count增加2</div>
 <div @click="$store.commit('sub',{num:1})">点击每次count减少1。参数以对象形式传递</div>

         2.辅助函数  mapMutations
和mapState很像 ，把位于mutations中的方法提取了出来，我们可以将它导入 。mapMutations将组件中的 methods 映射为 store.commit 调用。用法：

import { mapState, mapMutations} from 'vuex'
export default {
  methods: {
//然后当作普通方法使用
    ...mapMutations(['add', 'sub'])
  },
  computed: {
    ...mapState(['count'])
  }
}




//例如
 <div @click="add(2)">+</div>

• actions
          state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作。比如异步请求数据和定时器等操作。官方介绍：Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。所以我们在addAsync 中使用context.commit('add', num)使用了mutations的add方法。

  const store = new Vuex.Store({
    // 实例化vuex的构造参数
    state: {
      count: 0
    },
    // 通过mutation操作state里面的值,同步操作
    mutations: {
      add (state, num) {
        state.count += num
      },
      sub (state, payload) {
        state.count -= payload.num
      }
    },
    // 异步操作，通过mutations间接更改state的值
    actions: {
  //一秒后增加count的值
      addAsync (context, num) {
        setTimeout(function () {
          context.commit('add', num)
        }, 1000)
      }
    }
  })

  在其他组件中使用：
          1.原始形式：

  <div @click="$store.dispatch('addAsync',2)">点击后等待一秒再增加2</div>

          2.辅助函数  mapActions

  import { mapActions} from 'vuex'
  export default {
    methods: {
      //当作普通方法调用就好
      ...mapActions(['addAsync'])
    }
  }

• getters
  有时我们还需要从state中派生出一些状态，这些状态是依赖state的，然后我们就会用到getters

const store = new Vuex.Store({
  // 实例化vuex的构造参数
  state: {
    count: 0
  },
  // 通过mutation操作state里面的值,同步操作
  mutations: {
    add (state, num) {
      state.count += num
    },
    sub (state, payload) {
      state.count -= payload.num
    }
  },
  // 异步操作，通过mutations间接更改statement的值
  actions: {
    addAsync (context, num) {
      setTimeout(function () {
        context.commit('add', num)
      }, 1000)
    }
  },
 
  getters: {
    handeleCount: (state) => {
      return `${state.count}只小鸡`
    }
  }
})

再其他组件使用:
        1.原始形式：

<div>{{$store.getters.handeleCount}}</div>

        2.辅助函数：

import { mapGetters } from 'vuex'
export default {
  computed: {
   //然后当作计算属性使用即可
    ...mapGetters(['handeleCount'])
  }
}


//例如
<div>{{handeleCount}}</div>

总结：

1. state定义数据，使用$store.state获取
2. mutations修改数据，同步操作，使用$store.commit提交修改。
3. actions主要用于异步操作，通过mutations间接修改state数据，使用$store.dispatch提交修改。
4. getters主要用于派生依赖state的数据，使用$store.getters获取

此文章介绍的是vuex最基础的使用，更多用法和更详细的介绍指路官网：https://vuex.vuejs.org/zh/