vuex的用法和一些容易被忽略的地方

因为一般都会通过vue-cli 脚手架去初始化一个vue项目模板.

个人习惯在 src 中新建一个store.js【向外export一个vuex 的 Store实例】 用于当做 vuex核心文件,

然后建立 state.js/mutations.js/actions.js/getters.js【分别向外导出state,getters,mutaions,actions对象】 等四个vuex对象文件。

之后store.js中引入四个对象文件,并讲四个对象挂载到 vuex的 Store实例上:

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

import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'

export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})

 

之后讲vuex实例挂载到vue实例中!!!

 

1-Actions 和 2- mutations 区别:

 

1 用于异步更新state  | |  2 一般是同步更新 state

1 其实也是通过调用 2-mutaions 中的一个mutation 实现state数据的更新,只不过1中可能会发异步请求,讲结果更新为 state新数据

 

mapState/mapActions 去调用获取state中的数据 /  映射Actions 中的异步方法,映射成功的方法可以被直接调用!!

语法:

...mapActions(['trigger_getPosition']) 【methods 属性中的使用 mapActions】
这里映射 actions 中的 trigger_getPosition 方法,之后 可以在 mounted()等 钩子函数中 使用 this.tirgger_getPositon()直接调用 trigger_getPosition() 方法

mapState用法一样。!!

 

上一篇:Vuex的基本使用


下一篇:Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' 解决办法