Vuex 丨store 获取数据的多种方法（一）

Vuex...

1，什么是vuex？怎么使用？什么场景下使用？

  Vuex是vue中状态管理；在main.js引入store；场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

  引入vuex

  利用npm的包管理工具

npm install vuex --save

在src下建一个store文件夹，并在下面建一个store.js文件，文件中引入vue，vuex

import Vue from 'vue';
import Vuex from 'vuex';

使用Vuex需要在引入后use一下

Vue.use(Vuex);

这样就成功了，现在做一个共享数据

在store.js代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        num:0
    },
    mutations : {
        add(state,n){
            state.num+=n;
        },
        del(state,n){
            state.num-=n;
        }
    }
})

新建一个Home.vue模板

<template>
    <div id="user">
        user
      <!--{{$store.state.num}}-->
      <!--{{zxd}}-->
      <!--{{countPlusLocalState}}-->
      {{num}}
      <!--<button @click="$store.commit('add',10)">add</button>-->
      <!--<button @click="$store.commit('del',10)">del</button>-->
      <button @click="add(2)">add</button>
      <button @click="del(1)">del</button>
    </div>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    export default {
        // computed: mapState({
        //     第一种接受数据方法
        //     // hhh: state => state.num,
        //     第二种接受数据方法
        //     // zxd : 'num'
        //     第三种接受数据方法
        //     countPlusLocalState(state){
        //         return state.num + 100
        //     }
        // }),
        //第四种接收数据的方法
        computed:mapState(['num']),
        //第五种接收数据的方法
        // computed:{
        //     ...mapState(['num']),
        //     he(){
        //         return 'hhehehe'
        //     }
        // },
        name: "user",
        methods:{
          ...mapMutations(['add','del'])
        },

</script>

<style scoped>

</style>