当前位置: 首页 > Web前端 > vue.js

vuex_3

时间:2023-03-31 21:11:06 vue.js

vuex参考:https://vuex.vuejs.org/zh/Installnpmrunvuex--saveProductiondependency简单使用三部分展示使用Vue.use()使用vueximportvuefrom'vue'importVuex从'vuex'Vue.use(Vuex)生成一个存储实例conststore=newVuex.Store({state:{count:0},getters:{getterCount(state){returnstate.count+1}},mutations:{changeCount(state,payload){state.count=payload.count}},actions:{changeCount({commit}){commit('changeCount')}}})使用,通过store.state获取对象,通过store.提交触发状态更改store.commit('changeCount')//触发mutationsstore.dispatch('changeCount')//dispatchactionsconsole.log(store.state.count)//->1console.log(stroe.getters.getterCount)//->2以上步骤已经可以使用vuex,但是在组件中使用不方便。每次在组件中使用它时,都必须导入它。因此,Vuex提供了一个从根组件到所有子组件的store。通过选项“注入”store的机制:newVue({el:'#app',store:store,})这时候可以通过this.$storethis.$在组件中直接使用vuexstore.commit('changeCount')控制台。日志(这个。$store.state.count)与组件一起使用。上面提到,在根元素组件之间注入store后,可以通过一些辅助方法在组件中方便的使用store。State通过this.$store直接访问computed:{count(){returnthis.$store.state.count}}通过辅助函数mapState,mapState的返回值是一个对象import{mapState}from'vuex'//objectsyntaxcomputed:mapState({//箭头函数count:state=>state.count,//Stringcount:'count',//想用this的时候只能用正则函数countAndThis(state){returnstate.count+this.localCount}})//数组语法computed:mapState(['count'])//最后一种写法,使用展开运算符,可以存在原生computedcomputed:{localCount(){return1},...mapState({countAndThis(state){returnstate.count+this.localCount}})}一般放在computed属性里,不会放在data里,因为不会触发update,也可以直接使用,会更新,但是不知道会不会有其他问题,所以不用那么担心最好直接放在computedattribute中getterdefinesgetters:{//返回一个值getterCount(state){returnstate.count+1}//返回一个方法,可以从外部传入参与count的计算MoreOut:state=>count=>state.count+count}用法同state,只是辅助方法改为mapGettersMutation来定义mutations:{changeCount(state,payload){state.count=payload.count},//添加新对象时,应该这样加,否则会没用单值,多值时方法一,但是为了保证统一,还是用统一的方法一比较好//方法一store.commit('changeCount',{count:10})//方法二,对象样式提交methodstore.commit({type:'changeCount',count:10})辅助函数,mapMutationsimport{mapMutations}from'vuex'methods:{//对象参数传递...mapMutions({changeCount:'changeCount'}),//数组参数传递...mapMutations(['changeCount'])}在Actionaction中可以定义异步操作:actions:{changeCount({commit}){commmit('changeCount')}}使用方法和mutation一样,只是trigger方法变成了dispatch,辅助方法在项目比较大的时候变成了mapActionsModule这时候可以考虑把store分成modules,每个模块都有自己的状态、突变、动作、getter,并且可以嵌套://rootGetters仅在命名空间启用时才有用constlogin={state:{count},getters:{getterCount(state,getters,rootState,rootGetters){returnstate.count+1}},突变:{changeCount(state,payload){state.count=payload.count}},actions:{changeCount({state,getters,commit,dispatch,rootState,rootGetters},payload){commit('changeCount')}}}conststore=newVuex.Store({modules:{login}})默认不启用Namespace命名空间,模块内部的actions、mutations和getters在全局注册命名空间,状态是本地的。启用命名空间后,当模块注册时,其所有的getters、actions、mutations都会根据模块注册的路径自动调整名称。Enableconstlogin={namespaced:true,//启用命名空间state:{count},getters:{getterCount(state){returnstate.count+1}},mutations:{changeCount(state,payload){state.count=payload.count}},actions:{changeCount({commit}){commit('changeCount')}}}conststore=newVuex.Store({modules:{login}})辅助方法改值方法1,扩展路径在原来的基础上。在这种情况下,数组语法不能被缩短。import{mapState,mapGetters,mapMutations,mapActions}from'vuex'computed:{...mapState({count:state.login.count}),...mapGetters({getterCount:'login/getterCount'})}方法:{...mapMutations({changeCount:'login/changeCount'}),...mapActions({changeCount:'login/changeCount''}),}方法二是将额外的路径作为参数传递给辅助方法import{mapState,mapGetters,mapMutations,mapActions}from'vuex'computed:{...mapState('login',{count:state.count}),...mapGetters('login',{getterCount:'getterCount'})}方法:{...mapMutations('login',{changeCount:'changeCount'}),...mapActions('login',{changeCount:'changeCount'}),}第三种方法是使用createNamespacedHelpers创建基于某个命名空间的辅助函数import{createNamespacedHelpers}from'vuex'const{mapState,mapGetters,mapMutations,mapActions}=createNamespacedHelpers('login')计算:{...mapState({count:state.count}),...mapGetters({getterCount:'getterCount'})}方法:{...mapMutations({changeCount:'changeCount'}),...mapActions({changeCount:'changeCount'}),}vuex高级插件功能感觉不太可能用到,反正目前没用过,这个选项会hook每个mutation如果exposed,可以生成状态的快照,比较变异前后的状态差异,或者对某个变异做特殊处理。严格模式在严格模式下启用conststore=newVuex.Store({strict:true,//...})在这种情况下,如果状态变化不是由变异函数引起的,则会报错。严格模式会深入监控状态树。在生产环境中,conststore=newVuex.Store({strict:process.env.NODE_DEV!=='production',//...})表单处理是严格模式,如果输入绑定到vuex.state的值,当输入进入时,state会直接修改由于value没有被mutation修改,所以会报错,所以要做一些特殊处理//...computed:{message:{get(){返回this.$store。state.obj.message},set(value){this.$store.commit('updateMessage',value)}}}复制代码