vue是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
示例如下：
(1) 在根目录下创建 stroe/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建一个 store
const store = new Vuex.Store({
// (1)初始 state 对象
state:{
hasLogin: false,
token: "",
company:"未知",
userInfo: {
"name": "未知",
"role": "未知",
"age": 0
},
},
// (2)定义一些mutation
mutations:{
change(state,company){
state.company = company;
},
login(state,token,userInfo) {
state.hasLogin = true;
state.token = token;
state.userInfo = userInfo;
},
logout(state) {
state.hasLogin = false;
state.token = "";
},
celarUserInfo(state) {
state.userInfo = {
"name": "",
"role": "",
"age": 0
};
},
}
})
// 导出该模块:以便其他文件可对其进行使用
export default store
在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等；并在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式将其导入，以便能够对其进行使用；但在一个文件或模块中，export、import可以有多个，export default仅有一个。
(2) 在main.js中挂在Vuex
import store from './store'
Vue.prototype.$store = store;
(3) 获取状态对象与触发状态变更
<template>
<view>
<text>名称:{{company}}</text>
<button type="primary" @tap="onChange()">更改</button>
</view>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
export default {
data() {
return {
}
},
computed:{
...mapState(['company'])
},
methods: {
onChange : function(){
this.$store.commit('change', 'jk');//通过 store.commit 方法触发状态变更
}
},
onLoad() {
}
}
</script>
<style>
</style>
说明：使用 Vuex 保证了变量在全局的统一性，可以在实际开发中进行对应场景的应用。
