Vue2知识点（五）（vuex的基本原理和使用）

1.vuex是什么？

​ 概念：专门在vue中实现集中式状态（数据）管理的一个插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写）,也是一种组件间通信的方式，且适用于任意组件间的通信。

​ Vue采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间的通讯，而现在有了vuex，组件就都和store通讯了。这也是为什么官网再次会提到Vuex构建大型应用的价值，如果你不打算开大大型的单页应用，使用Vuex可能会变得很繁琐，对于大型项目，可以使用Vuex作为不同组件之间的状态管理，而对于小型的项目，推荐使用HTML5特有的属性，localStroage和sessionStroage作为数据之间的传递。

​ vuex有这么几个核心概念：State、Getter、Mutation、Action、Module。

​ state里面就是存放的我们上面所提到的状态

​ mutations就是存放如何更改状态

​ getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。

​ actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。

​ modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。

2.什么时候使用vuex

​ ①多个组件依赖于同一个状态

​ ②来自于不同组件的行为需要变更同一个状态

3.搭建vuex环境

1.npm i vuex@3进行安装，vue2对应vuex3,vue3对应vuex4

2.创建文件：src/store/index.js

//引入vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件

//准备actions对象--响应组件中用户的动作
const actions={}
//准备mutations对象--修改state中的数据
const mutations={}
//准备state对象--保存具体的数据
const state={}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

3.在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......
//创建vm
new Vue({
    el:'#app',
    render:h=>h(App),
    store
})

4.基本使用

1.初始化数据，配置actions,配置mutations,操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)

const actions={
    //响应组件中的动作
    jia(context,value){
        //console.log('actions中的jia被调用了',minState,value);
        context.commit('JIA'，value)
    }
}

const mutations={
    //执行加
    JIA(state,value){
        //console.log('mutations中的JIA被调用了',state,value)
        state.sum+=value
    }
}

//初始化数据
const state={
    sum:0
}

//创建并暴露store
export default Vuex.Store({
    actions,
    mutations,
    state
})

2.组件中读取vuex中的数据：store.state.sum

3.组件中修改vuex中的数据：store.dispatch('actions中的方法名',数据)或$store.commit('mutations中的方法名',数据)

4.注：若没有网络请求或其他业务逻辑，组件也可以越过actions,既不写dispatch,直接编写commit