什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（响应式）。
Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
优势
- Vuex的状态存储是响应式的，可跟踪每一个状态变化，一旦它改变，所有关联组件都会自动更新相对应的数据。
- 共享数据，解决了非父子组件的消息传递（将数据存放在state中）。
- 统一状态管理，减少了请求次数，有些情景可以直接从内存中的state获取数据。
劣势
vuex会把自身挂载到所有组件上,不管当前组件是否用到state里面的属性，所以频繁混乱的使用vuex会增加页面的性能损耗。
如果你的操作数据不涉及到公共操作，只是单一组件操作，一定不要把对应的属性对象放到vuex的state中，可以使用storage或者globalData。
使用场景
- 当一个组件需要多次派发事件时。例如购物车数量加减。
- 跨组件共享数据、跨页面共享数据。例如订单状态更新。
- 需要持久化的数据。例如登录后用户的信息。
- 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时。
核心概念
state、getter、mutation、action、module
（网上资料太多，不做详解了）
使用方式
一、引入
main.js中引入路径
import Vue from 'vue'
import App from './App'
import store form '@/store/vuex.js'
Vue.prototype.$store = store
const app = new Vue({
store,
...App
})
二、编译vuex.js
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from '@/modules/moduleA.js';
import moduleB from '@/modules/moduleB.js';
// 可实现state永久存储
// import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
var store = new Vuex.Store({
// plugins:[createPersistedState()],
/***
* 获取 this.$store.state.userName
* 设置 this.$store.state.userName = "skz";
* **根据官方说明，不可直接更改state中数据，需要通过mutations**
***/
state:{
useravatar:'/static/placeloder_pic_120.png',
username: '脚上三颗痣',
age: 18,
sex: '保密',
contact: '12345678901'
},
/**
* 其实就是vue的computed
* 使用方式: store.getters.currentUserName/currentUseravatar;
**/
getters:{
currentUserName(state){
return state.username;
},
currentUseravatar(state){
return state.useravatar
}
},
/***
* 数据突变, store数据改变的唯一方法
* 使用方式this.$store.commit(方法名, 参数)
* mutation 必须是同步函数，否则无法确认发生改变时间
***/
mutations:{
changeUserName(state, username) {
state.username = userInfo.username;
state.useravatar = userInfo.useravatar;
},
changeUseravatar(state, useravatar) {
state.useravatar = userInfo.useravatar;
},
add(state, ageNum){
state.age += ageNum
}
},
/***
* 执行方法，类似mutations，
* action 提交的是 mutation，通过 mutation 来改变 state ，而不是直接变更状态
* action 可以包含任意异步操作
* 使用方式this.$store.dispatch('addAge', 1)
***/
actions:{
addAge(context, num){
context.commit('add', num);
},
changeUserName(context){
setTimeout(function() {
context.commit('changeUserName', {username: 'skz001'})
}, 3000);
},
// 异步promise示例
/*
用法
store.dispatch('actionMethod').then(() => {
// ...
})
*/
actionMethod({commit}){
return new Promise((resolve, reject)=>{
setTimeout(function() {
commit('someMutation')
resolve('success')
}, 1000);
})
}
},
/**
* 数据model
**/
modules:{
moduleA,
moduleB,
}
})
// 导出对象
export default store;
三、使用
1.基本使用方式在vuex.js中已做说明，下面讲的是利用辅助函数（其实就是映射）的方式完成数据响应.(纯手敲的代码，请忽略高亮~~~~)
<template>
<view>
<view class="user-header-section">
<image :src="useravatar" mode="aspectFill" @click="changeAvatar"></image>
<text>点击更换头像</text>
</view>
</view>
</template>
<script>
import {
mapState,
mapGetters,
mapMutations,
mapActions
} from 'vuex';
// ...mapXX 均有数组和对象两种写法
export default {
data() {
const currentDate = this.getDate('end');
return {
gender: ['男', '女', '保密'],
age: this.$store.state.age // 获取age
}
},
computed: {
// state
...mapState(['useravatar', 'userName'])，// 写法一
sex: 'sex', // 写法二
contact: (state)=>state.contact, //写法三
// getter
// 写法一 this.$store.getter.usename
// 写法二 ....mapGetter(['username', 'useravatar'])
// 写法三 ...mapGetter({'name': 'username', 'avatar':'useravatar' })
// 使用 console.log(this.name) / console.log(this.username) / console.log(this.$store.getter.username)
},
methods:{
//将mutation里的方法映射到该组件内
// this.changeUseravatar() 映射到 this.$store.commit('changeUseravatar')
...mapMutations([
'changeUserName',
'changeUseravatar' //等同于this.$store.commit('changeUseravatar')
]),
changeAvatar(){
//上面已经将mutation映射到组件内，所以组件可以直接调用changeUseravatar
this.changeUseravatar('https://xxxx')
},
// 用法同...mapMutation，其实就是映射
// ...mapActions([
// 'storeMethods'
// ])
}
</script>
以上就是vuex的基本使用方式。对于把state、getter、mutations、actions拆分成功各自的.js类，看个人习惯了
网友评论