vue3 vuex 的基本使用与修改状态

2023-03-08  本文已影响0人  43e1f527c136

store

index.js文件

import {createStore} from 'vuex'

//导出文件

export default createStore({

//全局变量存储

state:{

    a:''

},

//接受组件中store.dispatch()发射事件通过commit传给mutions对state修改

actions:{

option(conted,val){

      conted.commit('OPTION',val)

        }

}

//对state数据进行修改

mutations:{

    OPTION(state,value){

        state.a=val

        }

    }

})

//main.js

对导出的组件进行注册和挂载

import store from './store'

app.use(store)

//组件内使用

获取

//导入

import {useStroe} from ‘vuex'

接受store对象

const store=useStore();

//通过store.state.获取state内的数据

//修改state的状态

//通拓store.dispatch()传递给actions 第一个参数触发是事件名,第二个参数是要修改的值

store.dispatch('option',val)

上一篇 下一篇

猜你喜欢

热点阅读