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