1.vuex的引入

npm install vuex --save

2.main.js

import store from “vuex的js文件的路徑”；
import Vue from “vue”；

3.vuex.js文件

import Vue from “vue”；
import Vuex from "vuex";

Vue.use(Vuex);

const state={
    count:88
}
const mutations={
    jian(state){
        count--
   }
}
export default new Vuex.Store({
    state,
    mutations
})
 

4.vue組件獲取store數據源

<template>
    <div id="me">
        <div>{{$store.state.count}}</div>
    </div>
</template>

<script>
    export default{
        name:"me",
    }
</script>

5.vue組件通過computed獲取數據源

<template>
    <div id="me">
        <div>{{count}}</div>
    </div>
</template>

<script>
    export 
 
default{
        name:"me",
        computed:{
         count(){
             return this.$store.state.count+1
         }
        }
    }
</script>

6.vue組件通過mapState獲取數據源

<template>
    <div id="me">
        <div >{{$store.state.count}}</div>
    </div>
</template>

<script>
    import {mapState} from 
 
‘vuex‘; //引入mapState工具。
    export default{
        name:"me",
           // es6寫法獲取數據
        computed:mapState({
            count:state=>state.count
            })
        //es5寫法
        computed:mapState({
            count:function (state) {
                return state.count+2
            },
            }),
           //數組寫法。
               computed:mapState([
        "count"
        ])
    }            

7.vue組件自己定義常量保存數據源

<template>
    <div id="me">
        <div >{{count}}</div>
    </div>
</template>

<script>
    import {mapState} from ‘vuex‘; //引入mapState工具。
    export default{
        name:"me",
        // es6寫法獲取數據
        computed:mapState({
            count:state=>state.count
        })
        //es5寫法
        computed:mapState({
            count:function (state) {
                return state.count+2
            },
        }),
         //數組寫法。
         computed:mapState([
              "count"
         ])
    }            

vuex之state