Vue学习之Vuex

Vue学习之Vuex

---

一、Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

具体点来说来说，Vuex就是管理组件内数据方法的一个公共仓库。本来每组件内的数据方法都是只能组件内去使用的，有了Vuex，就可以把组件内的一些数据放到公共仓库里，可供其他的组件去使用，有了这个公共的仓库，也能按照统一的标准去管理和使用里面的数据和方法

二、Vuex的使用

1.安装

1.npm安装

npm install vuex 

2.引入cdn资源

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> 
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
<font color=#999AAA >代码如下（示例）：

2.定义Vuex实例

与vue-router类似，使用Vuex需要先定义一个store实例

代码如下（示例）：

//仓库配置对象
		let storeConf = {
	        //状态存储的位置
	        state:{
	            msg:'hello'
	        },
	        //获取 在getters中获取到state中的数据再返回处理
	        getters:{
	            msgUpper(state){
	                return state.msg.upperCase();
	            }
	        },
	        //突变  同步操作  修改state中的数据
	        mutations:{
	            //payload 载荷（参数）
	            changeMsg(state,payload){
	                state.msg=payload
	            }
	        },
	        //动作 可以放异步
	        actions:{
	            //提交突变  分发动作
	            getAllMsg(sto,payload){
	                 let arr=[];
	
	                //提交突变
	                sto.commit('changeMsg',arr)
	                //分发动作
	                st.dispatch('getAllMsg',[])
	            }
	        }
	    };
        // 仓库对象
        let store = new Vuex.Store(storeConf);

3.引入仓库

new Vue({
            el: '#app',
            //注册仓库
            store,
            data: {
                msg: 'hello'
            },
            created() {
                console.log(this.$store.state);
                console.log(this.$store.getters);
                console.log(this.getMsg);
                console.log(this.changeMsg);
            },
            computed: {
                ...Vuex.mapState(['storeMsg']),
                ...Vuex.mapGetters(['storeMsgUpper'])
            },
            methods: {
                ...Vuex.mapActions(["getMsg"]),
                ...Vuex.mapMutations(["changeMsg"])
            },

        })

4.使用数据

<div id='app'>
        {{msg}}
        <br>
        {{$store.state.storeMsg}}
        {{$store.getters.storeMsgUpper}}
        <br>
        {{storeMsg}}
        {{storeMsgUpper}}
        <br>
        <button @click="$store.commit('changeMsg','test')">提交突变</button>
        <button @click="$store.dispatch('getMsg','fairy')">分发动作</button>
        <br>
        <button @click="changeMsg('terry')">提交突变2</button>
        <button @click="getMsg('larry')">分发动作2</button>

    </div>

---

三、核心概念

这些核心概念在官方的文档中有解释，但是非常抽象，我就按照自己的理解总结一下

1.state

state使Vuex中存放数据（状态）的地方，可以将将每个vue实例中的公共变量抽取出来进行统一管理。这其中的数据可以通过this.$store.state去访问到，也可以通过辅助函数去得到。但一般不直接这样获得state中的数据

 computed: {
        count() {
             return this.$store.state.count
         }
         //或者 
         ...Vuex.mapState(["count"])

2.getters

getters用于获取state中的数据并且做一定的处理。
getters可以返回数据，也可以返回一个函数，用来给getter传参，这样可以实现查询的功能，比如下面这个例子

let store = {
            state: {
                students: [
                    { id: 1, name: 'zhangsan' },
                    { id: 2, name: 'lisi' }
                ]
            },
            getters: {
                studentList: state => { return state.students },
                student: state => { return function (id) { return state.students.filter(student => student.id == id) } },

            }
        }	

访问getters

computed: { 
            studentList() {
                return this.$store.getters.studentList
                } 
                //或者 
                ...Vuex.mapGetters(["studentList", "student"]) 
            }

3.mutation

mutation（突变），顾名思义，所有使state发生改变的事件都放在这里，而且必须是同步操作。mutation中的函数都有相同的参数，第一个参数为state ,第二个参数是来接受在调用mutation的时候用户传递的第一个实参。

顺便提一句，突变中的函数名一般全大写

 mutations: {
    CHANGE_MSG(state, data) {
      state.msg = data
    },

    CHANGE_STUDENT_LIST(state, data) {
      state.studentList = data
    },

  },

获取突变函数

methods: {
                ...Vuex.mapMutations(["CHANGE_STUDENT_LIST"])
            },

4.action

Action 类似于 mutation，不同在于Action提交的是 mutation，而不是直接变更状态，并且Action 可以包含任意异步操作。
Action函数接受一个与store实例具有相同方法和属性的context对象，可以调用里面的commit、state、getters。第二个参数用来接收用户调用的时候传递的第一个实参。
在项目中，一般在action中写http请求，比如下面这个

actions: {
    //commit()是在actions里调用mutation里的突变.
    //dispatch()是在actions里调actions的动作,
    //state数据
    
    async pageQuery({ commit, dispatch, state }, data) {
      let res = await pageQuery(data);
      commit('CHANGE_STUDENT_LIST', res.data)
    },
}

获取action函数

 methods: {
                ...Vuex.mapActions(["pageQuery"]),
            },

5.module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

总之就是Vuex提供了模块化

		let aModule = {
            namespaced: true,
            state: {
                amsg: 'aMsg数据',
                msg: 'helloa'
            },
        };

        let bModule = {
            namespaced: true,
            state: {
                bmsg: 'bMsg数据',
                msg: 'hellob'
            },
        };
        let store = new Vuex.Store({
            // 模块化导入
            modules: {
                aModule,
                b: bModule
            }
        })

总结

今天整理了一下Vuex，Vuex在开发中应该使必不可少的，它提供了更加模块化的开发，像一个仓库，把一些共有的数据方法存放里面，方便管理和使用