> Vuex 是一个专为 vuejs 应用程序开发的全局状态管理模式，可以跨页面，跨组建之共享这些全局状态
[TOC]
# 简单示例
## 创建store仓库
> 文件地址：/store/index.js
~~~
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state) {
state.count ++;
},
sub(state, n=1) {
state.count -= n;
}
}
})
export default store
~~~
## main.js中挂载vuex
~~~
import Vue from 'vue'
import App from './App'
// 引入vuex
import store from './store/index.js'
// 把vuex定义成全局组件
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store, //挂载
...App
})
app.$mount()
~~~
## 页面调用
~~~
<template>
<view class="content">
<view>{{counter}}</view>
<view>{{this.$store.state.count}}</view>
<button type="default" @tap="doAdd">加加</button>
<button type="default" @tap="doSub">减减</button>
</view>
</template>
<script>
export default {
methods:{
doAdd(){
this.$store.commit('add')
},
doSub(){
this.$store.commit('sub', 2)
}
},
computed:{
counter(){
return this.$store.state.count
}
}
}
</script>
~~~
# 相关参数
## state
> 把相关的变量放入state参数进行状态管理，该参数只可读，如要修改，请使用mutations参数
> 官方地址：https://vuex.vuejs.org/zh/guide/state.html
### mapState 辅助函数
> 当一个组件需要获取多个状态时，将这些状态都在代码中分别声明计算属性会比较冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
#### 创建store仓库
> 文件地址：/store/index.js
~~~
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state:{
count:0,
students: [
{ name: 'wk', score: 59 },
{ name: 'jj', score: 80 }
]
}
})
~~~
#### 页面调用
~~~
<template>
<view class="content">
<view>{{count}}</view>
<view class="" v-for="(item,index) in students" :key="index">
{{item.name}}
</view>
</view>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed:{
...mapState([
'count',
'students'
])
}
}
</script>
~~~
## getter
> 当我们需要对state进行派生或者扩展其他的处理计算时，可以选择使用getter进行二次封装，相当于计算属性
> 官方地址：https://vuex.vuejs.org/zh/guide/getters.html
### mapGetters 辅助函数
> mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
#### 创建store仓库
> 文件地址：/store/index.js
~~~
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state:{
students: [
{ name: 'wk', score: 59 },
{ name: 'jj', score: 80 }
]
},
getters:{
// 过滤数据，获取大于>60分的优质学生，getter相当于计算属性
greatStudents(state){
return state.students.filter(function(val){
return val.score > 60;
});
},
// <=60的候补学生
badStudents(state) {
return state.students.filter(function(val){
return val.score <= 60;
});
}
}
})
~~~
#### 页面调用
~~~
<template>
<view class="content">
<view>优质学生：</view>
<view class="" v-for="(item,index) in greatStudents" :key="index">
{{item.name}}
</view>
<view>候补学生：</view>
<view class="" v-for="(item2,index2) in badStudents" :key="index2">
{{item2.name}}
</view>
</view>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed:{
...mapGetters([
'greatStudents',
'badStudents'
])
}
}
</script>
~~~
## mutation
> 更改 state的唯一方法是提交 mutation，并且mutation 必须是同步函数（详情参考官方）
> 官方地址：https://vuex.vuejs.org/zh/guide/mutations.html
### mapMutations 辅助函数
> 你可以在组件中使用 this.$store.commit('xxx') 提交 mutation
> 或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
#### 创建store仓库
> 文件地址：/store/index.js
~~~
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state:{
count : 0
},
mutations:{
add(state){
state.count ++
},
sub(state, num) {
state.count -= num
}
}
})
~~~
#### 页面调用
~~~
<template>
<view class="content">
<view>{{this.$store.state.count}}</view>
<button type="default" @click="add">加加加</button>
<button type="default" @click="sub(2)">减减减</button>
</view>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods:{
...mapMutations([
'add', // 将 `this.add()` 映射为 `this.$store.commit('add')`
'sub' // 将 `this.sub(num)` 映射为 `this.$store.commit('sub', num)`
])
}
}
</script>
~~~
## action
> Action 类似于 mutation，不同在于
> 1. Action 提交的是 mutation，而不是直接变更状态
> 2. Action 可以包含任意异步操作
> 官方地址：https://vuex.vuejs.org/zh/guide/actions.html
### mapActions 辅助函数
> 你在组件中使用 this.$store.dispatch('xxx') 分发 action
> 或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
#### 创建store仓库
> 文件地址：/store/index.js
~~~
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state:{
count : 0
},
mutations:{
add(state){
state.count ++
},
sub(state, num=1) {
state.count -= num
}
},
actions:{
//异步模拟仅供参考
addAsync(context){
setTimeout(function(){
context.commit('add')
}, 1000)
},
subAsync(context, num=1){
setTimeout(function(){
context.commit('sub', num)
}, 1000)
}
}
})
~~~
#### 页面调用
~~~
<template>
<view class="content">
<view>{{this.$store.state.count}}</view>
<button type="default" @click="addAsync">加加加</button>
<button type="default" @click="subAsync(2)">减减减</button>
</view>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods:{
...mapActions([
'addAsync', // 将 `this.addAsync()` 映射为 `this.$store.dispatch('add')`
'subAsync' // 将 `this.subAsync(num)` 映射为 `this.$store.dispatch('subAsync', num)`
])
}
}
</script>
~~~
- 基础知识
- UNI核心介绍
- flex布局
- 生命周期
- 全局方法
- 组件定义
- 自定义组件
- 全局组件
- 组件之间的数据传输
- 条件编译
- 自定义头部
- 节点信息 (SelectorQuery)
- vuejs基础语法
- 页面跳转以及参数传递
- 事件的监听注册以及触发
- css3动画
- block的妙用
- mixin (混入)
- uniapp快捷键
- vuex状态管理
- 实用功能
- 获取服务提供商
- 启动页 / 启动界面
- 引导页
- tabbar配置
- 头部导航栏基础设置
- 上拉下拉（刷新/加载）
- 第三方登录
- 第三方分享
- 推送通知 之 unipush
- scroll-view双联动
- 配置iOS通用链接（Universal Links）
- 本地缓存操作
- 升级/更新方案
- 热更新
- 图片上传
- 搜索页实现
- canvas绘图助手
- 地图定位
- 第三方支付————todo
- 分类轮播
- 清除应用缓存
- uniapp与webview的实时通讯
- 视频-----todo
- 聊天----todo
- 长列表swiper左右切换
- 第三方插件
- uview
- mescroll
- uCharts (图表)
- 无名 (更新插件)
- 第三方模版
- 自定义基座
- 打包发行
- 要封装的方法
- 缓存 cache.js
- 请求接口 request.js
- 工具类 util.js
- 小程序登录 xcxLogin.js
- 版本更新 update.js
- 优质插件
- 更新插件----todo
- 语音
- 语音识别 (含上传)
- 百度语音合成播报接口
- 官方常用组建
- input 输入框
- image 图片
- audio 音频
- picker 选择器
- video 视频
- scroll-view 滚动视图