介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。(官网)

特别注意，Vuex4.x版本对应Vue3.x版本，Vuex3.x版本对应Vue2.x版本，并且Vuex只能为Vue服务！！！

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


// 准备state——用于存储数据
const state={
  sum:0,
  name:"TheRivers",
  address:"江河三千里"
}
// 准备actions——用于响应组件中的动作
// actions只管逻辑
const actions={
  add(context,value){
    console.log("开始加")
    context.commit("ADD",value)
  }
}

// 准备mutations——用于操作数据（state）
// mutations只管操作
const mutations={
  ADD(state,value){
    console.log("加结束")
    state.sum+=value
  }
}
// 类似vue中的计算属性
const getters={
  useData(){
    return state.sum*10
  }
}

// 创建并暴露vuex.store
export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})