初识“中央银行”--vuex

什么是VUEX

在当今快速发展的前端技术领域，构建高效、可维护的单页应用程序（SPA）成为了众多开发者追求的目标。随着应用复杂度的日益增长，管理应用程序的状态——这个看似简单实则错综复杂的任务，逐渐成为了一个巨大的挑战。状态散落在各个组件之中，难以追踪和同步，这不仅增加了开发难度，也影响了项目的可扩展性和团队协作效率。正是在这样的背景下，Vuex 应运而生，成为了Vue.js生态中不可或缺的一块基石。

Vuex，作为Vue.js官方推荐的状态管理模式，它提供了一套集中式管理应用所有组件共享状态的解决方案。不同于传统的组件间通信方式，Vuex引入了一个全局的“store”概念，将状态提升至应用级别，确保了数据流的清晰可控。通过明确的规则和模式，Vuex不仅解决了状态一致性的问题，还极大地提升了状态的可预测性和可测试性，为开发者打造了一条通向高效状态管理的康庄大道。

今天，我们初步走进vuex

vuex的安装

• 我们先新建一个vue的项目，这一步咱们这里就跳过了
• 建好项目之后，我们应导入vuex的包

npm i vuex

• 导入了之后，我们在main.js中引入

import store from './store' //状态仓库
app
.use(store)

到此我们就成功导入了vuex中的核心文件：store.js。它负责定义整个应用的状态结构、突变（mutations）、动作（actions）、getters以及可能的模块划分。

vuex中的读操作

vuex作为“中央银行”,我们该如何从它那里拿到数据呢？

首先，我们要拿数据，就要先有数据：

import { createStore } from 'vuex'
const state = {
    count:0, //计数状态 
    user:null,
} 

然后我们将我们的数据放到vuex的store中并抛出

const store = createStore({
    state,
    actions,
    mutations
})
  
export default store

这里面的actions、mutations是我们后面要用到的函数，现在就不用在意，把state放进去就行。这里的createStore记得import哦，见定义state的代码

ok，我们接下来进行读操作：

创建一个App.vue,并引入useStore函数:

import {useStore} from 'vuex'

然后通过useStore得到之前我们定义的count

const store = useStore() //hooks 编程
const count = computed(()=>store.state.count)

这时你console.log一下，就可以看到count的值了

然后你可以给App.vue安排一个子组件，看看不需要父组件给子组件传参，子组件能不能同样的操作拿到数据

vuex中的写操作

读操作简单，可写操作就难咯！打个比方：你在公司想报销一下交通费，是不是得先给财务，财务拿到上级的签字然后给你报销。这得有一个流程吧，在这里也是，你想要改数据也得走流程。

首先，我们把流程先“规定”(定义)一下:

先得是财务吧，也就是帮你把申请递交上去的那个角色：

const actions = {
    increment:({commit})=>{
        console.log('///');
        // commit 提交一个修改 提交给 mutations
        commit('increment')
    }
} 

然后，在定义那个执行的函数，在vuex中所有的状态修改都要经过 mutations，只有mutations 可以修改状态

const mutations = {   
    increment(state){ 
        state.count++ 
    }
}

现在，规章制度都定义完成，我们该提交申请了：

<button @click="increment">+</button>

const increment = ()=>{
  // 也可以使用 commit 代替 dispatch
  store.dispatch('increment')
}

我们来捋一下操作：

• App.vue中提交申请
• index.js中actions将修改提交给mutations
• mutations中执行修改

这就是写操作要完成想要执行的流程

总结

通过上述步骤，你已经完成了 Vuex 的基本配置和使用：

1. 安装和配置 Vuex：创建 Vuex store 和配置到 Vue 实例。
2. 读操作：在组件中读取 Vuex store 的状态。
3. 写操作：定义 actions 和 mutations 来修改 Vuex store 的状态。

Vuex 使得状态管理变得更有组织和结构，特别是在中大型应用中，其优势尤为明显。希望这个指南对你有所帮助！