ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## 一、概念 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> ```