vuex 的使用
vuex 的简介
- vuex 是全局状态管理器，在 state 中定义一个全局变量，可以在任何一个组件中进行获取、修改，并且可以将修改的内容同步到全局
npm install vuex --savevuex 的配置
- 项目中新建一个名为 store 的文件夹，用来存放所有配置文件或设置全局变量的文件
文章图片
import { createStore } from 'vuex'export default createStore({
// 要设置的全局访问的state对象
state: {
count: 0
},
mutations: {
// 进行数据更新，改变数据状态
countType(state, action) {
state.count = state.count + action.addNum
}
},
actions: {
// 执行动作，将数据发散到需要的位置
addCount(context) {
let action = {
addNum: 20
}
context.commit('countType', action)
}
},
getters: {
// 获取到最终的数据结果
getCount(state) {
console.log('getters-store中获取到了state', state);
return state.count
}
}
})vuex 的全局注入
- 入口文件(一般为 main.js)中引入 store，然后全局注入
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'const app = createApp(App)
app.use(store)
app.mount('#app')
vuex 的使用
- 改变全局 state 中的变量，这里用的是 vue3 的写法
{{ data.count }}触发vuex改变的事件
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量