使用Uniapp随手记录知识点

使用uniapp随手记录知识点

  • 1 组件
    • 内置组件
    • 扩展组件
  • 2 vuex状态管理
    • 使用流程
    • mapState 辅助函数
    • getters
    • Mutation

1 组件

内置组件

内置组件内主要包含一些基础的view button video scroll-view等内置基础组件,满足基础场景

扩展组件

扩展组件是uniapp封装了一些成品的组件,可以帮助开发者快速构建一些功能,节省时间。例如:日期选择小组件等

2 vuex状态管理

使用流程

  1. 创建vuex js
  2. 引入store存储
  3. 使用计算属性 获取状态机当中的值

mapState 辅助函数

当一个组件需要获取多个状态的时候,都声明成计算函数会有些重复和冗余。为了解决这个问题,我们可以使用mapState 辅助函数帮助我们生成计算属性。

  1. 第一种 在计算属性中使用mapState构建一个对象形式的映射

     	computed: mapState({
     		username: state => state.username,
     		age: state => state.age
     	})
    
  2. 第二种 如果状态机中的属性和vue组件中的属性名一致的情况下,也可以使用数组

     computed: mapState(['username','age'])
    

getters

getters 定义获取状态机中数据的辅助函数

访问方式

  • 导入store
    通过 store.getters.xxx 即可访问该函数
  • 直接通过this.$store.getters.xxx 就可以访问getters提供的函数

Mutation

Vuex中store数据改变的唯一方式就是Mutation, 通常mutations 里面放置的都是改变store中数据提供的方法, 使数据和视图分离

  • Mutation定义

    // 页面路径:store/index.js
    import { createStore } from 'vuex'
    const store = createStore({
    	state: {
    		count: 1
    	},
    	mutations: {
    		add(state) {
    			// 变更状态
    			state.count += 2
    		}
    	}
    })
    export default store
    
    
  • 触发Mutation的函数

    <!-- 页面路径:pages/index/index.vue -->
    <template>
    	<view>
    		<view>数量:{{count}}</view>
    		<button @click="addCount">增加</button>
    	</view>
    </template>
    <script>
    import store from '@/store/index.js'
    export default {
    	computed: {
    		count() {
    			return this.$store.state.count
    		}
    	},
    	methods: {
    		addCount() {
    			store.commit('add')
    		}
    	}
    }
    </script>
    
    

当然 还可以对Mutation函数定义接收参数,在调用Mutation函数的时候可以进行相应的参数传参操作。

你可能感兴趣的:(uniapp,javascript,uni-app,vue.js,前端)