Vuex---vue.js的状态管理模式,数据响应式管理,简而言之就是在vue中有多个组件或者是路由都需要使用一个状态(可以理解为一个变量的状态或者是数据),不需要使用props传值那么麻烦或者是使用Vue.prototype在原型上声明一个全局变量(直接声明的变量没有通过Vuex的话,他的状态不是响应式的,即其他页面修改这个状态的时候,不会改变初始值,那么另一个页面需要跟踪使用的时候得到的依旧是原始值,所以就有需要使用vuex来管理或更改)
Vuex的五个概念
state:{},//数据存储
mutations:{},//同步操作的数据修改----更改state中的数据状态(同步操作)
actions:{},//异步操作的数据修改----异步操作,发送请求数据回调到mutations中进行修改state中的数据
getters:{},//类似于vue的计算属性
modules:{}//模块化vuex,将store分割成不同的模块
安装
npm install vuex
使用mutations修改数据
//store文件下的index文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 10
},
mutations: {
incremment(state) {//定义一个方法修改store中的数据count
state.count++
}
}
})
export default store//导出store
vue使用,需要将store在main.js中引入才能使用哦
//html
<div>{{$store.state.count}}</div><!--$store.state.count获取到store的state中的数据-->
<el-button @click="addCount">+</el-button>
//js
addCount() {
//修改vuex中的数据。必须使用commit来提交,括号里面写的是在vuex中定义的方法名
this.$store.commit("incremment");
}
专业在点击按钮的时候,state中的数据就会响应变化