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 博主将在接下来的博文中,进行更加清晰的叙述。