实例

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>