vuex基本使用

原创于 2025-09-30 11:09:37 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

1.初始化数据、配置actions、配置mutations、操作文件store.js

为了便于区分：一般情况下actions的方法全部小写，mutations中的方法全部大写

2.组件中读取vuex中的数据：$store.state.sum

3.组件中修改vuex中的数据：$store.dispath('actions中的方法名'，数据)或$store.commit('mutations中的方法名'，数据)

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex
Vue.ues(Vuex)
const actions = {
    //响应组件中的动作
    jia(context,value){
        //console.log('actions中的jia被调用了')
        context.commit('JIA',value)
    }，
}
const mutations = {
    //执行加
    JIA(state,value){
        //console.log('mutations中的JIA被调用了')
        state.sum += value
    }，
}
//初始化数据
const state = {
    sum =0
}
//创建并暴露store
[!propt#aHR0cDovL25vZGUxLnB0LTE2OC5jb20=!propt#]
export default new Vuex.Store({
    actions,
    mutations,
    state,
})