普歌-码上鸿鹄团队-vuex基本用法总结

vuex的组成结构示意图

基本使用

安装vuex的依赖包

npm install vuex -save

导入vuex包

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

创建store对象

const store = new Vuex.Store({
//state 中存放的就是全局共享的数据
state: { count: 0}
})

将store对象挂载到vue实例中

new Vue({
  el: '#app',
  render: h => h(app),
  router
//将创建的共享数据对象，挂载到vue实例中
//所有的组件，就可以直接从store中获取全局的数据了
  store
})

核心概念

State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储

//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
  state: { count: 0 }
})

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

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

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

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

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

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

Mutation

Mutation用于变更Store中的数据
只能通过mutation变更Store数据,不可以直接操作Store中的数据

定义 Mutation
const store = new Vuex.Store({
  state: {
  count: 0
},
 mutations: {
  add(state) {
//变更状态
  state.count++
    }
  }
})

//触发mutation
methods: {
  handle1() {
//触发mutation的第一种方法
  this.$store.count('add')
  }
}

可在触发mutations时传递参数：

//定义Mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
   addN(state, step) {
   //变更状态
    state.count += step
   }
  }
})

//触发mutation
methods: {
  handle2() {
  //在调用 commit 函数
  //触发 mutations 时携带参数
  this.$store.commit('addN', 3)
  }
}

触发mutations第二种方法

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

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

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

Action

Action用于异步处理

//定义Action
const store = new Vuex.Store({
 //...
  mutations: {
   add(state) {
     state.count++
   }
  },
  actions: {
   addAsync(context) {
     setTimeout(() => {
       context.commit('add')
     },1000)
   }
  }
})

//触发 Action
methods: {
  handle() {
    //触发actions 的第一种方式
     this.$store.dispatch('addAsync')
  }
}

触发actions第二种方法

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

导入mapActions函数，将需要的actions函数，映射为当前组件的methods方法：

//2.将指定的actions函数，将需要的actions函数，映射为当前组件的methods方法：
methods: {
 ...mapActions(['addAsync','addNAsync'])
}

Getter

使用getters的第一种方法

this.$store.getters.名称

使用getters的第二种方法

import { mapGetters } from 'vuex'

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

参考: Vuex.