大致了解了Vue之后 现在我们来看一下Vuex
begin enjoy👇

vuex的使用

vuex的初步认识和使用

  • vuex是一款基于vue开发的另一个神作框架,是辅助vue的全局数据状态管理框架,vue的特点就是单向数据流,导致有些数据的传递只能从上往下一个个组件来传递,或者使用$on$emit来传递,这样到后期会增加vue项目的管理难度,导致项目迭代不断复杂,最终写到无法维护的地步而到崩溃跑路。

  • vuex是通过store对象来进行全局数据状态管理的,通过将store注入到vue中到了组件可以随意使用数据的目的

    Vue.use(Vuex);
    const store = new Vuex.Store({
        state : {
            count : 0,
        }
    });
    new Vue({
        el:'#app',
        store,
        router,
        render:h=>h(App),
    });
    

vuexstate模块

  • vuex使用单一状态树,用一个对象就包含了全部的应用层级状态。于是它便做为了一个唯一数据源。因此基于上边的定义的state模块的使用便可以在一个组件中直接获取这个值,而且无论是跨了多少层级的组件,在哪里都可以直接获取到,操作起来十分简单方便

    // App组件
    <template>
        <div>{{count}}</div>
    </template>
    <script>
    	export default {
            data(){
                return {
                    count:this.$store.state.count,
                };
            }
        }
    </script>
    
  • 最后可以使用mapState来将state的值直接映射到组件中使用,当然只能映射到computed模块来用相当于直接通过mapState获取state里的值来用

    // App组件
    <template>
        <div>
        	<div>{{count}}</div>
    		<div>{{getSum}}</div>
        </div>
    </template>
    <script>
    	export default {
            data(){
                return {
                    num:100,
                };
            },
            computed:{
                ...mapState({
                    count:state=>state.count,
                    getSum(state){
                        return this.num+state.count;
                    },
                }),
            },
        }
    </script>
    

vuex中的getter模块

  • state中的数据有时不会是那么简单的一个数据,可能是一个数组集合数据,于是乎要获取其中某个数据值时的操作就需要先映射到组件中,然后用个model来接收再操作,会比较麻烦,那么vuex提供了getter模块来帮我们解决这个问题,可以先预置定义好要操作state的一些条件取值方后,直接调用即可。
const store = new Vuex.Store({
    state:{
        persons:[
            {id:'1',name:'李白',age:18},
            {id:'2',name:'娜可露露',age:28},
            {id:'3',name:'不知火舞',age:38},
            {id:'4',name:'橘右京',age:48},
            {id:'5',name:'宫本武藏',age:58},
        ],
    },
    getters:{
        //通过属性访问
        getPerson1(state){
            return state.persons.filter(item => item.age>25);
        },
        //通过方法访问
        getPerson2:state => name => {
            return state.persons.find(item => item.name === '橘右京');
        },
    },
});
  • 那么实际在组件中要使用了,可以通过this.$store.getters.getPerson1来获取getters筛选的结果即可
  • 如果是通过方法访问的,则需要酱紫调用this.$store.getters.getPerson2('橘右京')
  • 最后一种在组件中的用法就是利用mapGettersgetter利用ES6的展开运算符,道理和mapState一样,在组件的computed模块里直接映射使用即可

vuexmutation模块

  • 修改vuex中的store中的state中的状态的唯一方法就是通过mutation模块来做处理才行这个模块是操作state的唯一途径,类似redux里的reducer模块的作用一样,毕竟照抄人redux的嘛,所以总结一下就是不是让你说想改就乱改的,而是需要通过mutation模块渠道来修改才行。
state:{
    count:0,
},
mutations:{
    addOne(state){
        state.count++;
    }
},
  • 对于上边代码,可以直接在组件内部通过@click方法点击某个按钮时,调用this.$store.commit('addOne')来调用修改statecommit是触发mutation模块的唯一关键入口方法
  • 但是一般修改state时,都不会把要修改的值写死,而是通过载荷payload来进行修改,这样了通过提交对象参数,可以修改的更加灵活
state:{
    count:0,
    obj:{
        name:'李白',
    },
},
mutations:{
    addOne(state,payload){
        state.count+=payload.num;
    }
},
  • 这样了,就可以直接通过commit来酱紫提交,this.$store.commit('addOne',{num:10})
  • 但是这样提交很没风格,因此vuex也学了redux那样进行了对象风格的提交方式来操作this.$store.commit({type:'addOne',num:10})
  • 如果要对state里某个对象进行新属性扩展了,vue虽然提供了set方法,但利用ES6可以让事情更加简单,用如下代码操作即可,this.$store.state.obj={...this.$store.state.objage:18
  • 因为可以直接利用对象风格化方式来提交mutation模块修改state,所以在一些中大型项目中往往不直接将mutation模块的名字定义那么死板,而是利用actions来定义mutation,这样做的目的就是增强代码的阅读性,利于其他人介入项目开发和更有效的利用mutation模块
import {ADD_ONE} from './mutation-actions';
state:{
    count:0,
    obj:{
        name:'李白',
    },
},
mutations:{
    //依然是利用ES6语法的强化字面量方式,增加代码可读性来一起维护mutation
    //这样做不是你喜不喜欢的问题,而是你的大佬制定的项目开发的规范来使用
    [ADD_ONE](state,payload){
        state.count += payload.num;
    }
},
  • 注意:mutation模块的代码都是纯函数代码,所谓纯函数的意思就是必须是同步代码模块!默认的mutation模块是不支持异步代码模块的,要想异步化操作,在后边的action模块中会讲解到
  • 最后就是在methods模块中通过mapMutations来映射mutation模块的操作
import { mapMutations } from 'vuex';
export default {
    methods:{
        ...mapMutations([
            //将this.addOne()方法映射为this.$store.commit({type:'addOne',num:10})
            'addOne'
        ]),
        ...mapMutations({
            //将this.add()方法映射为this.$store.commit({type:'addOne',num:10})
            //跟上边的差不多一样,只是多起了个key名来做为映射的代表罢了
            add:'addOne',
        }),
    }
}

posted @ Zycin (非转载 来自个人学习资料整理)