因为一般都会通过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用法一样。!!