目录JAVA全系列 教程
3762个小节阅读：7088k
目录
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本，未来主流的版本
人工智能 教程
顺势而为，AI创新未来
大厂算法 教程
算法，程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说，状态管理可以理解成为了更方便的管理组件之间的数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变数据
第一步：安装Vuex npm install --save vuex
第二步：配置Vuex文件
xxxxxxxxxximport { createStore } from 'vuex'
export default createStore({ state: { counter:0 }})第三步：在主文件中引入Vuex
xxxxxxxxxximport store from './store'app.use(store)第四步：在组件中读取状态
xxxxxxxxxx<p>counter:{{ $store.state.counter }}</p>// 或者import { mapState } from 'vuex';computed:{ ...mapState(["counter"])}
最常用的核心概念包含: State、Getter、Mutation、Action
对Vuex中的数据进行过滤
xxxxxxxxxximport { createStore } from 'vuex'
export default createStore({ state: { counter: 0 }, getters: { getCount(state){ return state.counter > 0 ? state.counter : "counter小于0，不符合要求" } }})xxxxxxxxxximport { mapState,mapGetters } from 'vuex';computed:{ ...mapGetters(["getCount"])}更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
xxxxxxxxxximport { createStore } from 'vuex'
export default createStore({ state: { counter: 0 }, getters: { }, mutations: { setCounter(state, num) { state.counter += num } }})xxxxxxxxxximport { mapState,mapMutations } from 'vuex';
methods:{ ...mapMutations(["setCounter"]), clickHandler(){ // this.$store.commit("setCounter",20) // 或者 // this.setCounter(10) }}Action 类似于 mutation，不同在于：
xxxxxxxxxximport { createStore } from 'vuex'import axios from "axios"
export default createStore({ state: { counter: 0 }, getters: { getCount(state){ return state.counter > 0 ? state.counter : "counter小于0，不符合要求" } }, mutations: { setCounter(state, num) { state.counter += num } }, actions: { asyncSetCount({ commit }){ axios.get("http://iwenwiki.com/api/generator/list.php") .then(res =>{ commit("setCounter",res.data[0]) }) } }})
xxxxxxxxxximport { mapState,mapMutations,mapGetters,mapActions } from 'vuex';
methods:{ ...mapActions(["asyncSetCount"]), clickAsyncHandler(){ // this.$store.dispatch("asyncSetCount") // 或者 // this.asyncSetCount() }}