## 一、概念
vuex是一个专门为vue.js应用程序开发的状态管理模式。
## 二、应用场景
vue多个组件之间需要共享数据或状态
## 三、关键规则
![](https://img.kancloud.cn/b6/51/b651244dfa284dbd86eabfcf7171a338_945x229.png)
## 四、使用
#### 1、首先在根目录下新建store文件夹
#### 2、然后再store文件夹下面创建index.js文件
#### 3、编写代码
实例一普通版:
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
username:"未登录用户"
},
mutations:{
MLOGIN(state,username){
// 修改全局的状态
state.username = username
},
MLOGOUT(state){
// 修改全局的状态
state.username = '退出用户'
}
},
actions:{ // 异步获取方法
login(context,username){
context.commit('MLOGIN',username)
},
logout(context){
context.commit('MLOGOUT')
}
}
})
export default store
```
实例二缓存版:
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
username:uni.getStorageSync('username')? uni.getStorageSync('username'):"未登录用户"
},
mutations:{
MLOGIN(state,username){
//记录缓存
uni.setStorageSync('username',username)
// 修改全局的状态
state.username = username
},
MLOGOUT(state){
//清除缓存
uni.clearStorageSync()
// 修改全局的状态
state.username = '退出用户'
}
},
actions:{ // 异步获取方法
login(context,username){
context.commit('MLOGIN',username)
},
logout(context){
context.commit('MLOGOUT')
}
}
})
export default store
```
#### 4、挂载调用main.js中
```
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
// 调用store vuex 状态管理
import store from '@/store/index.js'
const app = new Vue({
...App,
store
})
app.$mount()
```
#### 5、使用
实例一:
```
<template>
<view>
用户列表
<view class="">{{username}}</view>
</view>
</template>
<script>
import {
mapState,
mapActions
} from 'vuex'
export default {
data() {
return {
}
},
onLoad() {
uni.$on('getinfosss', ()=>{
console.log('user组件中的全局事件被触发')
})
},
computed:{
...mapState(['username'])
},
methods: {
...mapActions(['login','logout'])
}
}
</script>
<style>
</style>
```
实例二修改状态:
```
<template>
<view>
用户列表
<view class="">{{username}}</view>
<button class="" @click="login('登录成功')">登录</button>
<button class="" @click="logout">退出</button>
</view>
</template>
<script>
import {
mapState,
mapActions
} from 'vuex'
export default {
data() {
return {
}
},
onLoad() {
uni.$on('getinfosss', ()=>{
console.log('user组件中的全局事件被触发')
})
},
computed:{
...mapState(['username'])
},
methods: {
...mapActions(['login','logout'])
}
}
</script>
<style>
</style>
```