html5网站模板源码,wordpress后台访问卡,9i网站建设,淘宝客网站整站源码使用uniapp随手记录知识点 1 组件内置组件扩展组件 2 vuex状态管理使用流程mapState 辅助函数gettersMutation 1 组件
内置组件
内置组件内主要包含一些基础的view button video scroll-view等内置基础组件#xff0c;满足基础场景
扩展组件
扩展组件是uniapp封装了一些成… 使用uniapp随手记录知识点 1 组件内置组件扩展组件 2 vuex状态管理使用流程mapState 辅助函数gettersMutation 1 组件
内置组件
内置组件内主要包含一些基础的view button video scroll-view等内置基础组件满足基础场景
扩展组件
扩展组件是uniapp封装了一些成品的组件可以帮助开发者快速构建一些功能节省时间。例如日期选择小组件等
2 vuex状态管理
使用流程
创建vuex js引入store存储使用计算属性 获取状态机当中的值
mapState 辅助函数
当一个组件需要获取多个状态的时候都声明成计算函数会有些重复和冗余。为了解决这个问题我们可以使用mapState 辅助函数帮助我们生成计算属性。 第一种 在计算属性中使用mapState构建一个对象形式的映射 computed: mapState({username: state state.username,age: state state.age})第二种 如果状态机中的属性和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 --
templateviewview数量{{count}}/viewbutton clickaddCount增加/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函数的时候可以进行相应的参数传参操作。
