使用Uniapp随手记录知识点

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函数的时候可以进行相应的参数传参操作。