vuex入门文档

安装和配置

安装

 npm install vuex --save 

当pack.json文件内出现

"dependencies": {
    "vuex": "^3.0.1"
  },

即为安装成功

配置(类似于vue-router)

首先新建store文件夹在文件夹内新增index.js文件，在index.js文件内

import Vue from 'vue'   //引入实例Vue
import Vuex from 'vuex' //引入VueX


Vue.use(Vuex);  //使用Vuex

export default new Vuex.Store({  //将实例暴露出去
  state,
  getters,
  actions,
  mutations
})

在main.js中

import store  from './store'

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

vueX下的4个基本对象

state，getters，mutations，actions

State

存储状态。也就是变量

在store下的index.js内，可以通过直接定义，然后通过export default直接暴露出去

const  state: {
 count: 0
}
export default new Vuex.Store({
  state
})

在组件中可以通过computed方法，接收vuex传来的数据

<template>
  <div id="app">
   {{count}}
  </dev>
</template>
computed:{
 count(){
        return this.$store.state.count
    }
}

mutations

提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,不支持异步方法(异步方法用actions),第一个默认参数是state,

在store下的index.js内， 

const mutations ={
  increment(state,payload) {   //payload额外的参数，可以使一个对象
    state.count += payload.amount
  }
};

也可以通过常量的方法，调用

const SET_ADD = 'SET_ADD'

const mutations ={
  SET_ADD(state,payload) {
    state.count += payload.amount
  },
}

在组件中可以通过在methods中调用方法，来调用 vuex传递过来的方法

<template>
  <div id="app">
    Clicked: {{ count }} times
    <button @click="increment">+</button>
  </div>
</template>
<script>
  export default {
    methods:{
      increment(){
        this.$store.commit('SET_ADD',{amount: 10})
      }
    }
  }
</script>

getters

派生状态。也就是set、get中的get，类似有vue中的computed，都是用来计算 state 然后生成新的数据 ( 状态 ) 的

在store下的index.js内，接收state作为第一个参数

const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd' //判断奇数还是偶数
}; 

在组件中接收

<template>
  <div id="app">
    Clicked: {{ count }} times, count is {{ evenOrOdd }}.
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<script>
 export default {
    computed:{
     
      count(){
        return this.$store.state.count
      },
      evenOrOdd(){
        return this.$store.getters.evenOrOdd
      }
    },
}
</script>

actions

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作

在store下的index.js内，actions函数接受一个与store实例具有相同方法和属性的context对象，因此可以调用context.commit 提交一个mutation，或者通过context.state和context.getters来获取state和getters

actions: {
    increment (context) {
      context.commit('increment')
    }
  }

在ES6中可以简化代码

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

在组件文件中，用dispatch接收

      increment(){
        this.$store.dispatch('increment')
      },
      decrement(){
        this.$store.dispatch('decrement')
      }

当执行多次异步操作的时候，也可以在actions操作

  incrementAsync ({ commit,dispatch}) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        dispatch("alert")    //分发给actions
        commit('increment')
        resolve()
      }, 1000)
    })
  },
  alert(){
    console.log('hello world')
  }

可以使用mapSates，mapGetters,mapMutations,mapActions进行简化操作

其中 mapStates，mapGettters是在computed中调用的

mapMutations,mapActions是在methods中调用的

 import {mapActions,mapMutations} from 'vuex'

    methods:{
      ...mapActions([
        'increment',
        'decrement',
        'incrementIfOdd',
        'incrementAsync'
      ]),
      ...mapMutations([
        'increment',
        'decrement'
      ]),
     }