简介
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。搭建环境
创建主文件，通常为 src/store/index.js
// src/store/index.js
// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
// 准备actions对象
const actions = {}
// 准备mutations对象
const mutations = {}
// 准备state对象
const state = {}
// 准备getters对象
const getters = {}
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
// main.js
......
// 引入store
import store from './store'
......
// 创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
基本使用
首先介绍 state、getters、actions、mutations 四个对象
state
state中主要用来存储需集中管理的数据
组件中读取 Vuex 中的数据可以采用如下方式(不要直接修改 Vuex 中的数据，修改使用 action 或 mutations )
this.$store.state.XXX
getters
当state中数据需要加工时,可使用getters加工后再使用
例如：
// 获取10倍的数据
const getters = {
// bigSum(state){ return state.sum*10 } }
使用：
this.$store.getters.bigSum
getters有一个默认参数 state，可直接获取state中的数据
正常情况下getters无需传参，但若想传参，可以采用一个小技巧，即返回一个函数，如下所示：
// 获取n倍的数据
const getters = {
bigSum(state) => (n) => state.sum * n
}
使用
this.$store.getters.bigSum(10)
mutations
用于操作数据(state) mutations 中的方法通常有两个参数，一个是 state，一个是传入的 valueconst mutations = {
JIA(state, value){
// 执行操作的逻辑写在mutations中
state.sum += value
},
JIAN(state, value){
state.sum -= value
}
}
使用：
通过 commit() 执行方法，需传入两个参数，一个是 mutations 中定义的方法名（字符串），一个是需要传入的数据
methods: {
add(){
// 没有判断数据的逻辑,所以可以直接commit操作mutations
this.$store.commit("JIA", this.n)
},
jian(){
this.$store.commit("JIAN", this.n)
},
}
actions
actions 通常用于响应组件中的动作，比如在提交 mutations 前，用于执行一些判断逻辑等
如下所示，actions 的方法中通常包含两个参数
(1) context，可以使用其 context.commit() 方法提交 mutations ，或使用 context.state 直接操作数据
(2) value，待传入的数据
const actions = {
jishujia(context, value){
// context上下文中也可获取到state数据
// 用于判断数据的逻辑写在actions中
if(context.state.sum % 2){
context.commit("JIA", value)
}
},
jiawait(context, value){
setTimeout(() => {
context.commit("JIA", value)
}, 1000);
}
}
使用：
通过 dispatch 执行actions中的方法，需传入两个参数，方法名和数据
methods: {
jishujia(){
// 要通过actions层就要dispatch
this.$store.dispatch("jishujia", this.n)
},
waitAdd(){
this.$store.dispatch("jiawait", this.n)
}
}
小结
从上述介绍中我们可以总结出使用规律：
（1）当需直接获取数据时，可使用 this.$store.state.XXX 获取数据
（2）当需直接获取加工后的数据时，可定义 getters 并通过 this.$store.getters.XXX 获取加工后的数据
（3）当有网络请求或其他业务逻辑，可使用 dispatch => actions提交动作 => mutations操作数据
（4）当无需判断或简单逻辑时，可直接使用 commit =>mutations操作数据
四个map方法的使用
每次使用时都需要 this.$store，太麻烦，Vue提供了一种映射方法可直接在组件内部操作Vuex，即为 mapState、mapGetters、mapActions 和 mapMutations。
标签：getters,mutations,actions,state,value,Vuex,store From： https://www.cnblogs.com/xt112233/p/17001822.html