Vue状态管理vuex中state的用法

Vue状态管理vuex中state的⽤法store
// store.js
import Vue from "vue";
import Vuex from "vuex";
e(Vuex);
export default new Vuex.Store({
state: {
token: "登陆凭证"
},
mutations: {},
actions: {},
modules: {}
});
使⽤state，直接使⽤和通过计算属性使⽤
// App.vue
<template>
<div id="app">
<p>{{ $store.state.token }}</p>
<p>{{ token }}</p>
</div>
</template>
<script>
export default {
computed: {
token() {
return this.$store.state.token;
}
}
};
</script>
通过mapState辅助函数使⽤state数组的⽅式（⼀）
// App.vue
<template>
<div id="app">
<p>{{ $store.state.token }}</p>
<p>{{ token }}</p>
</div>
</template>
<script>
import { mapState } from "vuex"; // 解构赋值引⽤辅助函数
export default {
computed: {
...mapState(["token"]) // 解构赋值使⽤辅助函数
}
};
</script>
通过mapState辅助函数使⽤state数组的⽅式（⼆）
// App.vue
<template>
<div id="app">
<p>{{ $store.state.token }}</p>
<p>{{ token }}</p>
</div>
</template>
<script>
import vuex from "vuex";
let mapState = vuex.mapState;
export default {
computed: mapState(["token"]) //映射的计算属性的名称与 state 的⼦节点名称相同时，才能使⽤数组的⽅式
};
</script>
通过mapState辅助函数使⽤state对象的⽅式(⼀)字符串
\\ App.vue
<template>
<div id="app">
<p>{{ $store.state.token }}</p>
<p>{{ token }}</p>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState({
token: "token"
})
}
};
</script>
通过mapState辅助函数使⽤state对象的⽅式(⼆)普通函数(如果要使⽤this获取局部状态，必须使⽤常规函数) \\ App.vue
<template>
<div id="app">
<p>{{ $store.state.token }}</p>
<p>{{ token }}</p>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data(){
return {
pwd:"密码"
}
},
computed: {
...mapState({
token(state) {
return this.pwd + state.token;
}
})
}
};
</script>
通过mapState辅助函数使⽤state对象的⽅式(⼆)箭头函数
\\ App.vue
<template>
<div id="app">
<p>{{ $store.state.token }}</p>
<p>{{ token }}</p>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState({
token: state => state.token
})
}
};
</script>。