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

vuex state 参考:https://vuex.vuejs.org/zh/guide/state.html

posted @ 2019-08-22 21:33  氵灬  阅读(3007)  评论(0编辑  收藏  举报