美文网首页
Vue初探(一)——vuex

Vue初探(一)——vuex

作者: kayleeWei | 来源:发表于2018-07-19 10:45 被阅读0次

    vuex的核心是store(仓库),可以管理全局状态state,state的存储是响应式的,不能直接改变store中的状态,必须显式的提交mutation,可以方便的跟踪全局状态的变化


    • vuex的使用
    1. 可以在项目目录下建立store文件夹,文件夹下建立store.js文件,在其中定义需要的state和mutations等
    // store.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    const s = {
        state: {
            data: {}
        },
       mutations: {}
    };
    
    export default new Vuex.Store {
        ...s
    }
    
    1. 也可在store.js中引入其他模块的文件,如moduleA.js(文件中定义了该模块下的state和mutations等)
    //moduleA.js
    let state = {
        dataA: []
    }
    
    let mutations = {
        methodA (state, ip) {
        }
    }
    export default {
        state,
        mutations
    }
    

    再在store.js中引入模块

    // store.js
    import moduleA from './store/moduleA'
    
    //在之前的...s之外加上模块
    export default new Vuex.Store({
        ...s,
        modules: {
            moduleA
        }
    });
    
    1. 在需要使用vuex的地方引入state,mutations(使用mapState,mapMutations辅助函数)
    <script>
    import { mapState, mapMutations } from 'vuex'
    
    export default {
        computed: {
          // 模块中的state好像必须用{}语法,默认情况下mutations等放入全局,state是在模块下的
            ...mapState({
                dataA: state => state.moduleA.dataA
            })
         // 若是全局的state,可用[]语法
            ...mapState([
                'data'
            ])
        },
        methods: {
            ...mapMutations([
                 'methodA'
            ])
        }
    }
    </script>
    

    1. 进阶:mutations中的方法名改为字符串,将mutations中的方法名都单独存在一个mutations-type.js文件中,方便多人协作时,对改变全局状态的mutations一目了然
    //moduleA.js
    import * as TYPES from './mutations-type'
    
    let mutations = {
        [TYPES.ADD_ONE](state) {
        }
    }
    

    mutations-type.js中将字符串方法名定义为变量

    export const ADD_ONE = 'ADD_ONE'
    

    在用到mutations方法的组件中, 引入方法名变量并使用

    // componentA
    import { ADD_ONE } from '@/store/mutations-type'
    
    export default {
            ...mapMutations({
                addIp: ADD_ONE
            })
        }
    }
    </script>
    

    1. 使用vuex中踩的小坑:
      在state中定义了一个对象数组,在mutations中的方法改变该数组时,用了lodash的_.remove() ,想从对象数组中删除某个对象,再用删除后的state中的数组渲染dom。
      发现删除一个对象后, vuex的数组确实改变了,但不能重新渲染dom,说明没有响应式的改变数组,最后将remove方法改成splice删除对象,就可以正常渲染了。
      通过这个小坑,说明改变vuex中的数组等复杂类型数据,最好是pop,push, shift,splice这样响应的改变,值得注意!!

    相关文章

      网友评论

          本文标题:Vue初探(一)——vuex

          本文链接:https://www.haomeiwen.com/subject/mkvzpftx.html