笔记：1.初识Vuex

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中的数据就会响应变化