vue状态管理vuex使用之项目中如何合理引入vuex

在前端开发过程中，状态的管理是一件很令人头疼的事情。尤其是在项目中，涉及同一状态的组件越多，在组件状态管理上，通过父子组件之间通信来更新状态将变的复杂。Vue项目开发过程中，借助vuex进行状态管理将极大的减轻我们在开发过程中对于组件状态的维护。

vuex:

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

那么如何合理的将vuex引入我们的项目当中？大致可分为以下几个步骤：

1. 新建vuex状态管理文件夹于src/ 下

2. store/index.js 中引入vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        add(state) {
            state.count += 1;
        },
        reduce(state) {
            state.count -= 1;
        }
    }
})

export default store;

3. 在项目入口文件 main.js 中引入vuex

import Vue from 'vue'
import Layout from './layout'
import router from './router'

Vue.config.productionTip = false
// 引入vuex
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { Layout },
  template: '<Layout/>'
})

至此，在我们的项目开发过程中，我们可以在 store.js方便地管理我们项目组件中的状态了。关于如何来合理使用vuex 博主将在接下来的博文中，进行更加清晰的叙述。

vue状态管理vuex使用之项目中如何合理引入vuex

猜你喜欢