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

标签：default   区别   method   直接   efault   rom   语法   get   数据   

因为一般都会通过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的用法和一些容易被忽略的地方

标签：default   区别   method   直接   efault   rom   语法   get   数据   

原文地址：https://www.cnblogs.com/Hijacku/p/14814640.html