vuex store 使用

青旅半醒 2022-11-20 08:05 263阅读 0赞

## vuex store 使用 ##

import {  mapState, mapMutations,mapActions,mapGetters } from 'vuex'; // 引入vuex的方法,用于使用辅助函数
    
    state => 使用的变量管理器，称作状态树，是一个单一的状态，只能通过vuex注册的方法进行改变
    使用：this.$store.state，或者使用 mapState
    
    mutations => 必须是同步函数，接受 state 作为第一个参数,并接受调用时传入的参数（称作载荷Payload）。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
    使用：this.$store.commit('xxx') 调用 mutations，或者使用 mapMutations，还有一种使用type属性的方法=> store.commit({ type: 'increment',amount: 10})，这种方法会将整个对象都作为载荷传给 mutation 函数
    
    actions => Action 类似于 mutation，区别于可以执行异步操作，例如在此进行请求后数据处理。可以在此处提交mutation(actions修改state的方法是提交mutation).
    使用：this.$store.dispatch('xxx') 分发 action，或者使用 mapActions
    组合 Action：store.dispatch('actionA').then(() => { })
    
    还可以在另一个action中注册另一个异步方法，返回一个异步的函数，那么我们在调用actionB时同样可以等待异步进程then：
    actionB ({  dispatch, commit }) { 
        return dispatch('actionA').then(() => { 
          commit('someOtherMutation')
        })
    }
    当我们需要队列时，应该使用es7方法 async / await
    
    getters => 类似于state，但是他是以方法的形式返回数据，可以用于数据处理结果直接展示，例如对列表进行过滤并计数。可以认为是 store 的计算属性，接受 state 作为第一个参数，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
    使用：this.$store.getters.doneTodos调用getters函数，或者使用mapGetters辅助函数。
    
    
    // 引入vuex中注册的方法，方法调用应该放在生命周期的methods中引入
    methods: { 
    		...mapMutations(['setLogin'])
    		...mapActions(['setLogin'])
    }
    // 引入vuex中的状态管理器，state只可以读取，不能直接修改，如果需要修改需要注册一个方法去修改，这个数值会根据store中的改变而改变，因此可以采用watch监听数据变化。getters返回的是处理后的state数据。
    computed: { 
    	...mapState(['login']),
    	...mapGetters(['doneTodosCount'])
    }
    
    我们应该提前在store中初始化好所有所需属性，当需要在对象上添加新属性时应该使用Vue.set(obj, 'newProp', 123)方法，或者使用state.obj = {  ...state.obj, newProp: 123 }
    我们多人协作时应采用mutation-types.js管理方式管理我们的store，由于我们的团队成员较少以及小程序体量的局限性，包括项目对store的使用率过低的情况不采用此方式增加项目体积。