在Vue项目的运行中使用了Vuex,通过前期的学习了解到Vue特点是多组件。设想如果我们开发的是一个大项目,那么多个组件之间的通信和状态将会难以维护。当应用遇到多个组件共享状态时,多个视图依赖于同一状态(数据),并且来自不同视图的行为需要变更同一状态(数据)。而Vuex就是来管理这部分的数据,将状态管理单独拿出来,统一进行处理。后期维护的过程中数据的修改和维护就会变得更加简单和清晰
具体使用:用户界面负责触发动作(Action),(commit) 提交这个变化mutations,进而改变mutate对应状态(State),从而反映提交render到视图(View/components)上。
安装及使用
安装:
npm install --save vuex
使用:
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
每一个vuex核心是store,store是一个容器,包含着应用中大部分的状态。区别于传统的全局变量:
1.vuex的存储是响应式的,当vue组件从store中读取状态,若欧store中的状态发生变化,相应的组件会进行更新
2.通过显式地提交(commit)mutations来改变store中的状态
组成:
在项目中src新建store文件,在此目录下创建index.js文件,index.js基本代码如下:
import Vue from 'vue'
import Vuex from 'vuex' //导入并注册vuex实例
import user from './module/user'
import app from './module/app'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//状态,数据
},
mutations: {
//方法
},
actions: {
//异步修改state
},
modules: { //将项目分块
user,
app
}
})
总结:以上是对vuex的简单了解,具体使用方法待后续。