zoukankan      html  css  js  c++  java
  • 一篇搞定Vuex

    1.简介

      首先,你必须明显明白vuex到底是干啥的,主要解决开发中的哪些问题?

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

      说白了,就是:提供了那么一个公共存储的地方,存放各个组件的数据,组件访问数据和操作数据访问这个地方即可

      所以,Vuex主要解决是组件间数据传递问题,尤其是嵌套组件,项目一大时,父子组件间的数据传递就非常麻烦了,而Vuex则提供了一种集中管理组件数据的方案,当然小型项目就没必要用Vuex了

    2.Demo准备

    • vue init webpack-simple vuex-demo
    • cd vuex-demo
    • npm install
    • npm install vuex -S

    3.访问store对象的两种方式  

      Vuex的核心是Store(仓库),相当于是一个容器,一个store实例中包含以下属性的方法:

    • state  定义属性(状态、数据)
    • getters  用来获取属性
    • actions  定义方法(动作)
    • commit  提交变化,修改数据的唯一方式就是显式的提交mutations
    • mutations  定义变化

      注:不能直接修改数据,必须显式提交变化,目的是为了追踪到状态的变化

      创建store.js文件,在main.js中导入并配置store.选项

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    //定义属性(数据)
    var state = {
      count: 6
    }
    
    
    //创建store对象
    const store = new Vuex.Store({
      state,
    })
    
    //导出store对象
    export default store;
    
    import Vue from 'vue'
    import App from './App.vue'
    
    import store from './store.js'  //导入store对象
    
    new Vue({
      store,
      el: '#app',
      render: h => h(App)
    })

     

      方式一:通过this.$store访问

      //方式1:通过this.$store访问
      computed: {
        count() {
          return this.$store.state.count;
        }
      }
    

      方式二:通过mapState、mapGetters、mapActions访问,vuex提供了两个方法

    • mapState  获取state
    • mapGetters  获取getters
    • mapActions  获取actions
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    //定义属性(数据)
    var state = {
      count: 6
    }
    
    //定义getters
    var getters = {
      count(state) {
        return state.count;
      }
    }
    
    //定义actions,要执行的操作,如流程判断、异步请求
    const actions = {
      increment(context) { //包含 commit dispatch state
        context.commit('increment');
      },
      decrement(context) {
        if (context.state.count > 10) {
          context.commit('decrement');
        }
      }
    }
    
    //定义mutations,处理状态(数据)的改变
    const mutations = {
      increment(state) {
        state.count++;
      },
      decrement(state) {
        state.count--;
      }
    }
    
    //创建store对象
    const store = new Vuex.Store({
      state,
      getters,
      actions,
      mutations,
    })
    
    //导出store对象
    export default store;
    
    <template>
      <div id="app">
        <button @click="increment">增加</button>
        <button @click="decrement">减小</button>
        <p>当前数字为:{{count}}</p>
      </div>
    </template>
    
    <script>
    import { mapState, mapGetters, mapActions } from "vuex";
    
    export default {
      name: "app",
      data() {
        return {
          msg: "Welcome to Your Vue.js App"
        };
      },
      //方式1:通过this.$store访问
      /*computed: {
        count() {
          return this.$store.state.count;
        }
      }*/
    
      /*computed:mapState([
        'count'
      ])*/
    
      computed: mapGetters(["count"]),
      methods:mapActions([
        'increment',
        'decrement',
      ])
    };
    </script>
    
    <style>
    </style>
    

      

    分模块组织Vuex

      上面那种方式,所有的都写在一个文件,项目大时,难免看起来显乱,所以需要分模块来组织,原则上就私有和公共的分开进行组织

      其中modules存放每个模块的,actions.js,getters.js,mutations.js存放公共的,目录如下

    user.js

    /**
     * 用户模块
     */
    
    import types from '../types.js'
    
     const state={
     	count:6
     }
    
    var getters={
    	count(state){
    		return state.count;
    	}
    }
    
    const actions = {
    	increment({commit,state}){
    		commit(types.INCREMENT); //提交一个名为increment的变化,名称可自定义,可以认为是类型名
    	},
    	decrement({commit,state}){
    		if(state.count>10){
    			commit(types.DECREMENT);
    		}
    	}
    }
    
    const mutations={
    	[types.INCREMENT](state){
    		state.count++;
    	},
    	[types.DECREMENT](state){
    		state.count--;
    	}
    }
    
    export default {
    	state,
    	getters,
    	actions,
    	mutations
    }
    

      

    actions.js

    import types from './types.js'
    
    const actions={
    	incrementAsync({commit,state}){
    		//异步操作
    		var p=new Promise((resolve,reject) => {
    			setTimeout(() => {
    				resolve();
    			},3000);
    		});
    
    		p.then(() => {
    			commit(types.INCREMENT);
    		}).catch(() => {
    			console.log('异步操作');
    		});
    	}
    }
    
    export default actions;
    

      

    getters.js

    const getters={
    	isEvenOrOdd(state){
    		return state.user.count%2==0?'偶数':'奇数';
    	}
    }
    
    export default getters;
    

      

    types.js

    /**
     * 定义类型常量
     */
    
    const INCREMENT='INCREMENT'
    const DECREMENT='DECREMENT'
    
    export default {
    	INCREMENT,
    	DECREMENT
    }
    

      

    index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    import getters from './getters.js'
    import actions from './actions.js'
    import user from './modules/user.js'
    
    export default new Vuex.Store({
    	getters,
    	actions,
    	modules:{
    		user
    	}
    });
    

      

    main.js

    import Vue from 'vue'
    import App from './App.vue'
    
    import store from './store/index.js'
    
    new Vue({
      store,
      el: '#app',
      render: h => h(App)
    })
    

    分模块组织的访问

            console.log(this.$store);
            console.log(this.$store.getters['dirTestcaseData']);
            console.log(this.$store.getters['user/count']);
    
            console.log(this.$store.state['project']);
            console.log(this.$store.state.user['count']);
    
            this.$store.dispatch("asset/changeCurrentFundIndex", index);
            this.$store.dispatch('increment');
    
    
    //导入
    import { mapState, mapGetters } from "vuex";
    
    //批量引入
        ...mapGetters("asset", {
          assetDetailType: "assetDetailType",
          tradeSelectVal: "tradeSelectVal",
          totalAsset: "totalAsset"
        })  //也支持数组
    
  • 相关阅读:
    POJ 3140 Contestants Division (树dp)
    POJ 3107 Godfather (树重心)
    POJ 1655 Balancing Act (树的重心)
    HDU 3534 Tree (经典树形dp)
    HDU 1561 The more, The Better (树形dp)
    HDU 1011 Starship Troopers (树dp)
    Light oj 1085
    Light oj 1013
    Light oj 1134
    FZU 2224 An exciting GCD problem(GCD种类预处理+树状数组维护)同hdu5869
  • 原文地址:https://www.cnblogs.com/xinsiwei18/p/9365606.html
Copyright © 2011-2022 走看看