vuex之state

Posted 2020-10-19 mj-my

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"
         ])
    }