vux_vux项目 - CSDN
精华内容
参与话题
  • vue---vux详解

    千次阅读 多人点赞 2020-07-10 10:37:45
    vue---vux详解VUEX 全局状态管理器什么样的数据需要放在vuex中?参数---详解`state``geeters``mutations``actions``modules`使用modules----state的使用及调用modules----getters的使用及调用modules----mutations的...

    VUEX 全局状态管理器

    • vue的全局状态管理器

    • 实现组件之间跨层传递数据

    • 实现数据与视图响应式更新

    • state

    • geeters

    • mutations

    • actions

    • modules

    • namespaced----命名空间

    什么样的数据需要放在vuex中?

    • 需要多个组件使用的数据,或者方法

    参数—详解

    state

    • 相当于vue中的data,用来存储数据的,在vue组件中获取,用 $store.state.数据名字
    // 数据
    state: {
    	// 这个数据写死了
    	goods : [{"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/ef617fac-7489-436d-b74e-c43582f09633.jpg","num":1,"price":899,"name":"\u5c0f\u7c73\u7535\u89c64A 32\u82f1\u5bf8","goods_id":2172700021,"select":true},{"buy_limit":1,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/65be1bac-6d3f-3766-3bac-c11b3aa13b8e.webp","num":1,"price":1199,"name":"Redmi Note 7 4GB+64GB \u68a6\u5e7b\u84dd","goods_id":2185200032,"select":true},{"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/a1\/pms_1514387870.88251945.jpg","num":1,"price":3599,"name":"\u5c0f\u7c73\u7b14\u8bb0\u672cAir 12.5  4G 128G \u94f6\u8272","goods_id":2175200001,"select":true}]
    }
    
    						<!-- // 调用          goods,就是数据名字-->
    <div class="good" v-for="good in $store.state.goods" :key="good.goods_id">
    

    geeters

    - `getters 从现有数据获取到新的数据`,相当于vue组件中的`computed`
    - `名字 : state => { 逻辑。。。 ; return 数据}`
    - 在vue组件中获取:`$store.gettes.数据名字`
    
    // 使用
    getters : {
      goodNum : state => {
    	  let num = 0;
    	  state.goods.forEach( item => {
    		  num += item.num;
    	  })
    	  return num;
      }
    },
    
    						<!-- 调用       goodNum就是已经计算过的数据名字   -->
     <van-tabbar-item to="/cart" icon="setting-o" :badge="$store.getters.goodNum">
    

    mutations

    • mutations 方法,操作数据,相当于vue组件中的methods
    • 在vue组件中使用方法:$store.commit("传过来的事件名字",需要传递的参数);
    // 使用
    mutations: {
    	// delGood事件名字,(state,good),state:对应state中的数据,good:对应组件传递过来的参数
    	delGoodVuex(state,good) {
    		var flag = window.confirm("你确定要删除码?");
    		if(flag) {
    			var index = state.goods.indexOf(good);
    			state.goods.splice(index,1);
    	}
    },
    
    // 调用
    // delGood 是vue中的事件,
    delGood() {
    	// this.$store.commit 就是接收,vuex中的事件delGoodVuex,且传递参数this.good.num,
    	this.$store.commit("delGoodVuex",this.good.num);
    },
    

    actions

    • 关于Ajax异步的方法需要放在actions中,执行异步的方法

    • actions 方法,可以执行异步操作方法,相当于vue组件中的methods

    • 在vue组件中使用:$store.dispatch("方法名字",data);

    • 使用:方法名字({commit},[参数]) { ajax方法};

    actions: {
      // 解构mutations中的所有方法
      getCart({commit}) {
    	  getCartAPI()
    	  .then( res => {
    		  // 已经结构了vuex中的mutations中的方法,
    		  // 所以调用初始化购物车的方法只需要:commit("方法名字",需要传输过来的数据);
    		  // 这里是因为调用了vuex本身的事件方法,所以使用此写法
    		  // 因为commit 是已经解构的方法,所以只需正确的找到需要的方法就行了,如果传参,就写参数
    		  commit("INIT_CART",res.data);
    	  })
    	  .catch( err => {
    		  console.log(err);
    	  })
      }
    },
    mutations : {
    	// 初始化购物车的方法
    	INIT_CART(state,goods) {
    		state.goods = goods;
    	}
    }
    
    • 调用actions中的方法时
    • $store.dispatch("方法名字");
    • 方法名字:就是在actions中定义的方法的名字
    // 调用actions的方法 
    // 在vue中调用vuex的actions中的方法
    this.$store.dispatch("getCart");
    

    modules

    • 模块
    • Vuex允许将store分割成模块(module)
    • 每一个模块都有vuex中的所有方法,statemutationsactionsgetters

    使用

    • 在store文件夹下,创建modules文件夹,在其下在创建对应的vuex模块:比如:登录模块的login.js
    // 登录模块的state
    const state = {}
    // 登录模块的getters
    const getters = {}
    // 登录模块的mutations
    const mutations = {}
    // 登录模块的actions
    const actions = {}
    // 导出默认的模块方法
    export default {state,getters,mutations,actions}
    
    • 需要将模块导入vuex中,在注册
    // 导入 login模块
    import login from './modules/Login.js'
    // 注册到vuex中
    modules : {
    	login
    }
    
    modules----state的使用及调用
    • state就是存储数据的
    • modules中的state是每个模块私有的,有命名空间
    • 调用使用:$store.state.注册的模块名.参数等
    // 使用,存储数据
    const state = {
    	name : "momo",
    	age : 20
    }
    
    <!-- 调用 -->
    				<!-- 获取vuex登录模块中的名字,年龄 -->
    <p>获取vuex中的模块数据 {{$store.state.login.name}}----{{$store.state.login.age}}</p>
    
    modules----getters的使用及调用
    • 对应的方法有三个参数,且它不是私有,默认没有命名空间
    • 参数1:state 自己这个模块的state
    • 参数2:getters 全局的getters,包括模块的getters
    • 参数3:rootState 全局的state
    // 使用
    const getters = {
    	<!-- 参数1,参数2,参数3,参考以上 -->
    	getGoods(state,getters,rootState){
    		console.log(state,getters,rootState)
    		return getters.goodNum;
    	}
    }
    
    • getters没有命名空间所以直接访问vuex中的gettser就可以访问到模块中的数据
    • $store.getters.模块中的getters中的数据名字
    <!--    getters没有命名空间所以直接访问vuex中的gettser就可以访问到模块中的数据 -->
    <p>getter:{{$store.getters.getGoods}}</p>
    
    modules----mutations的使用及调用
    • 与vue中的正常使用一样
    • 模块中的mutations也是没有命名空间的,所以也可以直接使用
    • vuex中的调用mutations的方法进行调用
    • $store.commit("需要调用的模块中的方法名字",需要传递的参数)
    // 使用
    const mutations = {
    	ADD_AGE(state,step=1) {
    		state.age += step;
    	}
    }
    
    • 调用
    • $store.commit("需要调用的模块中的方法名字",需要传递的参数)
    <!-- 调用 -->
    			<!-- 调用模块方法数据 -->
    <button @click="$store.commit('ADD_AGE')">年龄加</button>
    
    modules----actions的使用及调用
    • 用法与vuex中的差不多
    • 其中vuex中的{commit}解构vuex中的方法,模块中的{context},得到上下文中的所有方法
    • 具体情况可以自行打印查看
    • 方法名字({context},[参数]) { 逻辑 }
    // 使用
    const actions = {
    	addAge(context,arg){
    		// 这个是调用上下文中定义mutations的ADD_AGE事件
    		context.commit("ADD_AGE",arg);
    		var good = {"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/ef617fac-7489-436d-b74e-c43582f09633.jpg","num":2,"price":8990,"name":"小米55","goods_id":2172700028,"select":true};
    		console.log(context);
    		 // 模块访问vuex中全局的方法
    		 context.commit("addGood",good);
    		 // 模块可以访问vuex全局的state
    		 context.rootState.goods.pop();
    	}
    }
    
    • 因为没有命名空间,所以可以直接使用vuex的调用方法进行调用
    • $store.dispatch('需要调用的模块的actions方法')
    <!-- 调用 -->
    	<!--  -->
    <button @click="$store.dispatch('addAge')">actions年龄减</button>
    

    namespaced—命名空间

    • namespaced : true/false
    • true:打开命名空间
    • false:反之
    • 在导出的时候添加模块的命名空间
    // 导出
    export default {
    	// 命名空间
    	namespaced : true,
    	state,
    	getters,
    	mutations,
    	actions
    }
    

    getters有命名空间

    • 参数:数据名字(state,getters,rootState,rootGetters) {逻辑; return 数据}
    • 访问:$store.getters["模块名字/数据名字"];
    • 映射方法:...mapGetters["模块名字/数据名字"]

    mutations有命名空间

    • 参数:方法名字(state,参数);
    • 访问:$store.commit("模块名字/方法名字",需要传递的数据参数)
    • 映射方法:...mapMutations["模块名字/数据名字"]

    actions有命名空间

    • 参数:方法名字({dispatch,commit,getters,rootGetters},参数);
    • 参数:方法名字(context,参数);
    • 访问:$store.dispatch("模块名字/方法名字",需要传递的数据参数)
    • 映射方法:...mapDispatch["模块名字/数据名字"]

    问题----如何在vuex中调用vuex中的方法或事件

    • 使用:this.commit("需要调用的方法")

    使用映射解构的方法在组件中直接调用对应事件,数据名等

    • 那个组件使用那个vuex中的属性就导入对应的映射方法

    • 映射方法对应:mapState,mapGetters,mapMutations,mapActions

    • 导入方法:import {对应的映射方法} from 'vuex';

    • 使用方法:...对应的映射方法(['需要调用的vuex的方法,或者数据'])

    • 原因:这样可以不用在写,$store.state.数据名等这种

    • vuex中getters 映射成vue中的computed 就是对应的使用方法需要在对用映射成的vue的方法中才能使用

    • vuex中的actions ,映射成vue中的methds

    • 需要使用时,就跟使用vue中的数据,方法一样

    // 导入映射的vuex的方法
    	// vuex中getters 映射成vue中的computed
    	// vuex中的actions ,映射成vue中的methds
    import {mapGetters,mapActions} from 'vuex';
    import Bus from '@/utils/Bus.js';
    export default{
    	data(){return {
    		isShow:true,
    		active : 0
    	}},
    	computed : {
    		...mapGetters(['goodNum'])
    	},
    	created(){
    		// 因为有了映射的方法,我们就不用再使用dispatch这种了
    		// this.$store.dispatch("getCart");
    		this.getCart();
    	},
    	methods : {
    		...mapActions(["getCart"])
    	}
    }
    
    展开全文
  • vux的使用(一)

    千次阅读 2018-04-20 10:07:10
    由于时间紧,组件要求多,特尝试使用vux组件框架进行尝试。官方demo:https://vux.li/demos/v2/?x-page=github#/demo;用vue_cli安装好项目后。进入项目目录&lt;1&gt;. 在项目里安装vuxnpm install vux --...

    最近有个基于微信端的项目,使用vue框架。由于时间紧,组件要求多,特尝试使用vux组件框架进行尝试。

    官方demo:https://vux.li/demos/v2/?x-page=github#/demo;

    用vue_cli安装好项目后。进入项目目录

    <1>. 在项目里安装vux
    npm install vux --save

    <2>. 安装vux-loader (这个vux文档中没有明文跟你说要安装的啦)
    npm install vux-loader --save-dev

    <3>. 安装less-loader (这个是用以正确编译less源码,否则会出现 ' Cannot GET / ',自己看package.json,如果安装了,就不用装啦!)
    npm install less less-loader --save-dev

    <4>. 安装yaml-loader (不用装啦)
    npm install yaml-loader --save-dev

     进入build>webpack.base.conf.js下修改配置 

    1)首先引入vux-loader

    1
    const vuxLoader = require('vux-loader')

     

    2)然后将原来的module.exports 替换成const webpackConfig,然后在最底下写上这么一段代码

    1
    2
    3
    module.exports = vuxLoader.merge(webpackConfig, {
        plugins: ['vux-ui']
    运行 npm  run dev 即可
    展开全文
  • 基于vux,适合vux项目 暂时不支持vux $t方式的多语言功能 增加了删除按钮,点击则删除第一张图片 内置图片上传、增加、删除功能,但暂时每次只能操作一张图片 接上,允许用户监听事件,自己实现上传、增加、删除...
  • vux组件的引入及简单使用

    千次阅读 2018-08-19 15:08:29
    VUX组件主要是用来做微信端的一些项目,合理利用vux组件可以让我们的工作效率更高。 &lt;1&gt;. 在项目里安装vux npm install vux --save (安装到dependencies) 或者是 npm install vux --S  &...

    VUX组件主要是用来做微信端的一些项目,合理利用vux组件可以让我们的工作效率更高。

    <1>. 在项目里安装vux
    npm install vux --save (安装到dependencies)

    或者是 npm install vux --S 

    <2>. 安装vux-loader (vux文档中没有明文跟你说要安装)
    npm install vux-loader --save-dev (安装到devDependencies)

    <3>. 安装less-loader (这个是用以正确编译less源码,否则会出现 ' Cannot GET / ',自己看package.json,如果安装了,就不用装啦!)
    npm install less less-loader --save-dev

    <4>. 安装yaml-loader (不用装)
    npm install yaml-loader --save-dev

    <5>. 在build文件夹下webpack.base.conf.js 文件进行配置
    const vuxLoader = require('vux-loader') 【新加上去的】
    const webpackConfig = originalConfig 【originalConfig就是原来的 module.exports出去的代码,把它整个赋值给变量 webpackConfig】
    module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] }) 【在最后加多一句,这里就是引用插件vux啦!】

    'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vueLoaderConfig = require('./vue-loader.conf')
    const vuxLoader = require('vux-loader')
    
    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }
    
    const createLintingRule = () => ({
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        formatter: require('eslint-friendly-formatter'),
        emitWarning: !config.dev.showEslintErrorsInOverlay
      }
    })
    
    let webpackConfig = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      externals: {
        'weui': 'weui',
        'BMap': 'BMap',
        'EZUIPlayer': 'EZUIPlayer',
        'Stomp': 'Stomp',
        'BMAP_ANCHOR_TOP_LEFT': 'BMAP_ANCHOR_TOP_LEFT',
        'BMAP_ANCHOR_TOP_RIGHT': 'BMAP_ANCHOR_TOP_RIGHT',
        'BMAP_ANCHOR_BOTTOM_RIGHT': 'BMAP_ANCHOR_BOTTOM_RIGHT',
        'BMAP_ANCHOR_BOTTOM_LEFT': 'BMAP_ANCHOR_BOTTOM_LEFT',
        'BMAP_NAVIGATION_CONTROL_SMALL': 'BMAP_NAVIGATION_CONTROL_SMALL',
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          'api': path.resolve(__dirname, '../src/api'),
        }
      },
      module: {
        rules: [
          ...(config.dev.useEslint ? [createLintingRule()] : []),
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
          },
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      },
      node: {
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // source contains it (although only uses it if it's native).
        setImmediate: false,
        // prevent webpack from injecting mocks to Node native modules
        // that does not make sense for the client
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
      }
    }
    module.exports = vuxLoader.merge(webpackConfig, {
      plugins: ['vux-ui']
    })
    

     

    <6>最后别忘了,在resolve: {
    extensions: ['.js', '.vue', '.json','.less']里加入.less。




    https://www.jianshu.com/p/930d9bb22736
     

    展开全文
  • vue安装vux之神坑之路

    千次阅读 2018-09-14 15:56:12
    1、安装vux,npm install vux --save-dev 2、安装vux-loader,npm install vux-loader --save-dev 3、安装less、less-loader,npm install less less-loader --save-dev 4、安装vuex,npm install vuex --...

    1、安装vux,npm install vux --save-dev

    2、安装vux-loader,npm install vux-loader --save-dev

    3、安装less、less-loader,npm install less less-loader --save-dev

    4、安装vuex,npm install vuex --save-dev

    5、在build文件夹找到webpack.base.conf.js打开并进行配置(重点核心)

    第一步,将module.exports替换成

    const webpackConfig

    第二步,在const webpackConfig前加上

    const vuxLoader = require('vux-loader')

    第三步,在最末尾加上

    module.exports = vuxLoader.merge(webpackConfig, {
      plugins: ['vux-ui']
    });

    6、开始使用vux,引入组件(以弹出框Alert为例),import {Alert,TransferDom} from 'vux',代码如下:

    <template>
    	<div class="index">
    		<div v-transfer-dom>
    	    	<Alert v-model="show">{{message}}</Alert>
    	    </div>
    	</div>
    </template>
    
    <script>
    import {Alert,TransferDom} from 'vux'
    export default{
    	name: 'Index',
    	data(){
    		return{
    			message: 'Hello Vux!',
    			show: true,
    		}
    	},
    	directives:{
    		TransferDom,
    	},
    	components:{
    		Alert,
    	},
    	methods:{
    		onHide(){
    			alert('123456');
    		}
    	},
    }
    </script>
    
    <style lang="less">
    .index{
    	width: 100%;
    	height: 100%;
    }
    </style>

    7、效果图如下:

     

    希望对小伙伴们有帮助吧,请顺手点个赞咯~~,感谢...

    展开全文
  • vux基本使用

    2019-05-05 19:33:17
    vuex的基本使用 什么是状态? 用一条数据去管理一个视图或是视图中的一部分,那么我们就将这个数据称之为状态 什么是状态管理?...用一条数据去管理一个视图或是视图中的一部分,那么我们就将这个数据称之为状态,...
  • vux 简单使用

    千次阅读 2018-07-05 11:25:46
    1.安装:npm install vux --savevux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置:const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原来的 ...
  • vux教程

    千次阅读 热门讨论 2018-02-26 14:07:38
    一、vue安装(node.js)1、安装node.js https://nodejs.org/en/下载安装2、安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org检查方式 cnpm -V 出现版本号3、安装webpacknpm install ...
  • vux

    千次阅读 2019-09-19 17:20:34
    创建项目 vue init webpack 项目名称 ...下载vux npm install vux --save npm install vux-loader --save --dev 下载相关包 vue-style-loader,css-loader,less,less-loader 在main.js文件中引入 im...
  • vue3.0集成vux

    2019-10-11 09:48:20
    一、vue create demo创建脚手架项目,进入demo目录(cd demo)。 二、配置vux: ... (2)vux需要配合vux-loader使用,安装vux-loader,cnpm install vux-loader --save-dev。 (3)安装less,保证less...
  • vux使用教程

    万次阅读 2017-10-18 08:40:06
    在项目里安装vux npm install vux --save . 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm install vux-loader --save-dev . 安装less-loader (这个是用以正确编译less源码,否则...
  • vux入门

    2019-03-23 00:52:52
    vux vux读作[v’ju:z]。它是主要用于移动端的基于weui和vue的ui组件库。 看git上作者的描述很霸气。一种爱用不用的感觉。的pc端vue的ui框架有iview/elementui等。移动端使用vux较为方便。 主要用于移动端的基于weui...
  • 2016-07-20vux会为scroller自动生成一个自适应的div,这个div可能会覆盖很大,进一步影响到页面中的点击事件,正确的方法是在scroller外面设置一个div,设置此div的css属性overflow 属性为hidden,将已出的属性给...
  • Vue-Moblie-Templet-For-Vux 这是一个Vue结合Vux开发移动的端的模板,并且用了vw的自适应解决方案,模板已经解决了转换css大小单位为vm时, 把Vux中的css单位也处理,导致vux组件变形的bug。 如果你是用Vux...
  • 将 vux-loader从13降到12
  • 如何修改vux的css样式

    千次阅读 2018-08-16 17:20:32
    以panel为例 在div定义class &lt;div class="chargeRecordPage"&gt; &lt;group title="充电记录"&gt; &lt;panel :list="list" :type="... &am
  • 一、新建自带vux框架的vue项目(免配置) 1、安装vue环境 (已安装,跳过这一步) 2、新建基于vux的vue项目; vue init airyland/vux2 projectName //(新建项目配置已省略) cd projectName //(新建成功后...
  • vue-cli 3.x脚手架配置并使用vux

    万次阅读 热门讨论 2018-10-15 09:59:25
    vue-cli更新到3.x,改动很大,做前端的朋友推荐我将vux项目转到vue-cli3上,通过看文档和查资料,花了几个小时,终于完成,特此记录。 一、安装vue-cli 3 首先官方文档:https://cli.vuejs.org/ 官方文档包含了很...
  • vux框架组件自定义样式

    千次阅读 2018-08-08 17:27:00
    全局方式 方法一 在webpack.base.conf.js文件中配置 { name: 'less-theme', path: 'src/styles/theme.less' // 相对项目根目录路径 } 然后在配置的路径写入对应的.less文件 ...g...
  • vux框架的安装使用

    万次阅读 2018-01-30 20:45:30
    Vue中使用vux的配置,分为两种情况: 一、根据vux文档直接安装,无需手动配置 ? 1 2 3 4 5 npm install vue-cli -g // 如果还没安装 vue init webpack my-projectName // 创建名为 ...
1 2 3 4 5 ... 20
收藏数 4,641
精华内容 1,856
关键字:

vux