vuex组成：

1.state 统一定义管理公共数据
2.mutations: 使用它来修改数据
3.getters: 类似于vue中的计算属性
4.actions: 类似于methods,用于发起异步请求,比如axios
5.modules: 模块拆分
注意：其中最重要的内容为state和mutations

一、安装vuex依赖包

1	npm install vuex --save

二、导入vuex包

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

Vue.use(Vuex)

三、使用

情况1:在老项目中使用。先额外安装vuex包，然后在配置。
情况2:在新项目中使用。在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了(脚手架会自动帮我们完成的)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: { // 存放数据 和data类似
  },
  mutations: { // 用来修改state和getters里面的数据
  },
  getters: { // 相当于计算属性
  },
  actions: { // vuex中用于发起异步请求
  },
  modules: {// 拆分模块
  }
})

1、State

访问state中数据的第一种方式：
在任意组件中，通过this.$store.state.属性名来获取公共数据。
在模块中,则可以直接省略this而直接写成：{{$store.state.属性名}}

访问state中数据的第二种方式：

//1.从 vuex 中按需导入 mapstate 函数
import { mapState }from 'vuex

// 通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性:
computed:{
  ...mapState(['count'])  // 展开运算符，实现映射
}

1
2
3

<template>
  <div>{{ count }}</div>
</template>

2、Mutation

Mutation用于变更Store中的数据
● 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
● 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

触发mutation方式一：

// 定义Mutation
const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    // 方式一：没有参数
    add(state){
      // 变更状态
      state.count ++
    }

    // 方式二：传递参数
    addN(state,step){
      state.count += step
    }
  }
})

// 在页面中触发mutation
methods:{
  // 方式一：
  handle(){
    this.$store.commit('add')
  }
  // 方式二：
  // 触发mutation时传递参数
  handleN(){
     this.$store.commit('addN',3)
  }
}

commit的作用：调用某个mutation函数

触发mutation方式二：

从vuex中按需导入mapMutations函数

1 2	// 1.从 vuex中按需导入 mapMutations 函数 import { mapMutations } from "vuex"

通过刚才导入的 mapMutations函数，将需要的 mutations函数，映射为当前组件的 methods 方法:

// 2.将指定的 mutations 函数，映射为当前组件的 methods 函数
methods:{
  ...mapMutations(['add','addN']),
  hnadleBtn(){
    this.addN(5)
  }
}

3、Action

作用：action用来处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在Action 中还是要通过触发 Mutation 的方式间接变更数据。
注意：dispatch 函数，用来触发action

// 定义Action
const store =new vuex.store({
  //...省略其他代码
  mutations:{
    add(state){
      state.count++
    }
    addN(state,step){
      state.count += step
    }
  },
  actions:{
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      }，1000)
    }
    addNAsync(context,step){
      setTimeout(()=>{
        context.commit('addN',step)
      }，1000)
    }
  }
})

触发actions的第一种方式

methods:{
  handle(){
    this.$store.dispatch('addAsync')
  }
  handle1(){
    this.$store.dispatch('addNAsync', 5)
  }
}

触发actions的第二种方式：

1 2	// 1.从 vuex中按需导入 mapActions 函数 import { mapActions } from "vuex"

通过刚才导入的 mapActions函数，将需要的 actions 函数，映射为当前组件的 methods 方法:

// 2.将指定的 actions 函数，映射为当前组件的 methods 函数
methods:{
  ...mapActions(['addAsync','addNAsync']),
  hnadleBtn(){
    this.addNAsync(5)
  }
}

注意：映射的action方法，可以直接在页面中使用，不需要重新定义其他方法函数来嵌套调用映射出来的action方法，比如：

1	<button @click='addAsync'>按钮</button>

4、Getters

作用：在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)，不会修改store中的原数据。
store中数据发生变化，getter中的数据也会跟着变化。

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})

//定义 Getter
const store =new Vuex.store({
  state:{
    count:0
  },
  getters:{
    showNum:state =>{
      return '当前最新的数量是【'+ state.count +'】'
    }
  }
} )

其他方式：

// 1、引入mapGetters
import { mapMutations, mapGetters } from "vuex";

// 2、取数据 attachedInfo
computed: {
  ...mapGetters(["attachedInfo"]),
},
// 3、使用
mounted() {
  console.log(this.attachedInfo)
}

YL's Blog

Vuex的使用