Vue状态管理vuex中state的用法
-
store
// store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(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>
展开操作符 参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax
剩余参数 参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters
开发工具