Vue-Vuex

安装 Vuex 依赖包

//Vue2 需要指定安装Vuex3.0版本
npm i vuex@3.6.2

创建 store 文件夹

在 src 文件夹下新建 store 文件夹，然后在 store 文件夹中新建 index.js

index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state:{

  },
  mutations:{

  },
  actions:{
    
  }
})

main.js 中添加这两行

import store from './store'

new Vue({
  render: h => h(App),
  //添加store
  store
  
}).$mount('#app')

组件中访问 State 中数据的第一种方式

this.$store.state.全局数据名称

组件中访问 State 中数据的第二种方式

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

通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性

//将全局数据，映射为当前组件的计算属性
computed:{
	...mapState([''])
}

Mutation

Mutation 用于变更 store 中的数据，只能通过 Mutation 变更 store 数据，不可以直接操作 store 中的数据。

export default new Vuex.Store({
  //共享的数据
  state: {
    count:0
  },
  //用于修改state中的数据
  mutations: {
    add(state){
      //变更状态
      state.count++
    }
  }

 methods:{
    btnadd(){
    //触发 mutations 的第一种方式
      this.$store.commit('add')
    }
  }

可以在触发 mutations 时传递参数

export default new Vuex.Store({
  //共享的数据
  state: {
    count:0
  },
  //用于修改state中的数据
  mutations: {
    addN(state,step){
      //变更状态
      state.count += step
    }
  }

export default {
  data() {
    return {

    }
  },
  methods:{
    btnadd(){
      //触发 mutations 时携带参数
      this.$store.commit('addN',3)
    }
  }
}

触发 mutations 的第二种方式

//从 vuex 中按需导入 mapMutation 函数
import { mapMutation } from 'vuex'

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

import {mapState,mapMutations} from 'vuex'
methods:{
    ...mapMutations(['sub']),
    btnsub(){
      this.sub()
    },
  }

传参

mutations: {
    add(state,step){
      //变更状态
      state.count += step
    },
    sub(state){
      state.count --
    },
    subN(state,step){
      state.count -= step
    }
  },

methods:{
    ...mapMutations(['sub','subN']),
    btnsub(){
      this.sub()
    },
    btnsubN(){
      this.subN(2)
    }
  }

不要在mutation函数中，执行异步操作

Action

Action 用于处理异步任务

如果通过异步操作变更数据，必须通过 Action ，而不能使用 Mutation ，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

export default new Vuex.Store({
  //共享的数据
  state: {
    count:0
  },
  //用于修改state中的数据
  mutations: {
    add(state){
      //变更状态
      state.count ++
    },
    sub(state){
      state.count --
    },
    subN(state,step){
      state.count -= step
    }
  },
  actions: {
    addAsync(context){
      setTimeout(()=>{
        //通过context.commit触发mutation
        context.commit('add')
      },1000)
    }
  }
})

 methods:{
    //异步
    btnaddN(){
      this.$store.dispatch('addAsync')
    }
  }
}

触发 action 异步任务时携带参数

export default new Vuex.Store({
  //共享的数据
  state: {
    count:0
  },
  //用于修改state中的数据
  mutations: {
    add(state,step){
      //变更状态
      state.count += step
    },
    sub(state){
      state.count --
    },
    subN(state,step){
      state.count -= step
    }
  },
  actions: {
    addAsync(context,step){
      setTimeout(()=>{
        //通过context.commit触发mutation
        context.commit('add',step)
      },1000)
    }
  }
})

methods:{
    btnadd(){
      //触发 mutations 时携带参数
      this.$store.commit('add')
    },
    //异步携带参数
    btnaddN(){
      this.$store.dispatch('addAsync',3)
    }
  }

this.$store.dispatch() 是触发 actions 的第一种方式，触发 actions 的第二种方式：

//从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

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

methods:{
...mapActions(['addAsync','addNAsync']),
	btnsub1(){
      this.subAsync()
    }
}

Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据

Store 中数据发生变化，Getter的数据也会跟着变化

export default new Vuex.Store({
  //共享的数据
  state: {
    count:0
  },
  //用于修改state中的数据
  mutations: {
    add(state,step){
      //变更状态
      state.count += step
    },
    sub(state){
      state.count --
    },
    subN(state,step){
      state.count -= step
    }
  },
  actions: {
    addAsync(context,step){
      setTimeout(()=>{
        //通过context.commit触发mutation
        context.commit('add',step)
      },1000)
    },
    subAsync(context){
      setTimeout(()=>{
        context.commit('sub')
      },1000)
    }
  },
  getters:{
    showNum(state){
      return `当前最新数量:${state.count}`
    }
  }
})

使用Getters 的第一种方式：

this.$store.getters.名称

使用Getters 的第二种方式：

import { mapGetters } from 'vuex'

computed:{
	...mapGetters(['showNum'])
}

<h3>{{ showNum }}</h3>