Vue.js Vuex 入门指南

1.Vuex 是什么？为什么需要它？

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它解决了vue中不同组件之间状态共享的问题。
• 通俗的说，它就是一个带响应式的全局变量管理，它数据的改变会触发相关页面/组件的更新，这是普通全局变量做不到的

核心思想：把组件共享的状态（state）抽离出来，统一放在一个全局 store 中管理。任何组件都可以读取状态，但必须通过规定的方式（mutations）来修改它，从而让状态变化可预测、可追踪、可调试
简单说：Vuex = 全局数据中心 + 严格的修改规则

2.Vuex 的基本用法

• 安装（Vue 2 项目）

Vue 3 推荐用 Pinia

npm install vuex@3

• 编写vuex模块

//src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

// Vue.js 插件
Vue.use(Vuex)

const state = {
    count: 0
}

const getters = {
    
}
//Vuex中store数据改变的唯一方法就是mutation
const mutations = {
    
}

// mutations的再封装，mutations本身只负责state的数据修改，其余逻辑放在actions中，在通过它进行一系列逻辑处理之后再调用mutations
const actions = {
    
}

export default new Vuex.Store({
    state,// 状态对象，相当于data
    getters,// 包含多个getter计算属性函数的对象
    mutations, // mutations 里面装着改变数据的方法集合，处理数据逻辑的方法全部放在 mutations 里，使数据和视图分离。
    actions // action 可以包含任意异步操作，例如发送ajax请求
})

• 在 main.js 中挂载

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store'


Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})

3.四大核心模块

• 对比

模块	作用	调用方式	注意事项
state	存储应用的全局共享状态数据	this.$store.state.xxx 或 mapState	只存放跨组件共享的状态；禁止直接修改（必须通过 mutation）
getters	基于 state 派生计算数据（类似 computed）	this.$store.getters.xxx 或 mapGetters	无参 getter 有缓存；带参查询（返回函数）无缓存，慎用于高频调用
mutations	唯一合法同步修改 state 的方式	this.$store.commit('xxx', payload) 或 mapMutations	必须是同步函数；不能包含异步操作（如 API 请求）
actions	处理异步逻辑，并提交 mutations 修改状态	this.$store.dispatch('xxx', payload) 或 mapActions	不能直接修改 state；应通过 commit 触发 mutation

• getters —— 全局计算属性

每个方法需要返回一个值，这个值就是这个属性的值
每个方法存在2个参数，分别为：state和getters

const getters = {
    OddorEven (state, getters) {
        // vuex已经为其传递了state和getters这个参数

        //返回的值就是这个属性的值
        return state.count%2===0 ? '偶数':'奇数'
    }
}

• mutations —— 同步修改状态的唯一方式

参数一固定为state，参数二是方法调用时的传参，如果要传递多个参数，可将其封装成一个对象

//定义mutations
const mutations = {
    INCREMENT (state) {
        state.count++
    },
    CHANGEMSG(state,val){
        // 函数的第一个参数永远是state，便于读取state
        // 自定义传递的参数是第二个，可以省略
        state.msg = val
    }
}

• actions —— 异步操作与业务逻辑的容器

参数一是固定的{commit,state}，自定义参数为参数二

const actions = {
    incrementFn ({commit,state}) {
        if(state.count < 100){
            commit('INCREMENT')
        }
    },
    changeMsgFn ({commit,state},newMsg){
        // 参数一是固定的
        // 第二个参数为传递的参数
        setTimeout(() => {
            commit('CHANGEMSG',newMsg)
        },1000)
    }
}

• 将方法和数据映射到组件

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

//使用数组传参，需要vue和actions的名称一致
computed: {
    ...mapState(['count']),
    ...mapGetters(['OddorEven'])
},
methods: {
    ...mapActions(['increment']),
    ...mapActions(['incrementIfOdd']),
    ...mapActions(['incrementAsync'])
}

// 直接调用
this.count
this.increment()

4.配合v-model使用

涉及双向数据绑定要使用vue的计算属性设置get方法和set方法

• 在get方法中使用$store.state读取状态数据
• 在set方法中使用$store.commit()修改状态数据

// 组件模版
<input type="text" v-model="msg"></input>

// vue的计算属性
computed: {
    msg: {
        get(){
            return this.$store.state.msg
        },
        set(val){
            this.$store.commit('changeMsg',val)
        }
    }
}

// store模块
const state = {
    msg:''
}
const mutations = {
    CHANGEMSG(state,val){
        state.msg = val
    }
}