vuex学习笔记

表示网速太差，本想上传到github，无奈，实在上传不上去。

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

安装：npm install vuex --save  一定要加save  安装到生产环境中

卸载 ：npm rm vuex  

新建一个js文件，放我们的状态，一定要引入vuex和vue，并且使用vuex，代码里面有注释 

import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);

const store=new Vuex.Store({
    //状态值
    state:{
        count:1
    },
    //改变状态的方法
    mutations:{
        /**
         *add 方法名
         * state 状态值
         * n 参数
         */
        add(state,n){
            state.count+=n;
        },
        reduce(state){
            state.count--;
        }
    },
    //过滤操作
    getters:{
        // count:function(state){
        //     return state.count+=0;
        // }
    },
    //异步改变状态的方法
    actions:{
        addActions(aa){
            setTimeout(() => {
                aa.commit('add',2)
            }, 3000);
        },
        reduceAction(bb){
            // console.log(commit);
            bb.commit('reduce')
        }
    }
    
})
export default store;

在新建一个组件，去使用该状态

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr />
        <h3>{{count}}</h3>
        <p>
            <!--<button @click="$store.commit('add',10)">加</button>-->
            <button @click="add(1)">加</button>
            <button @click="$store.commit('reduce')">减</button>
        </p>
        <hr/>
            <p>
            <!--<button @click="$store.commit('add',10)">加</button>-->
            <button @click="addActions">actions加</button>
            <button @click="reduceAction">actions减</button>
        </p>
    </div>
</template>

<script>
    import store from '@/vuex/store';
    import  {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
    export default {
        name:"storeCom",
        data(){return {
            msg:"hello vuex"
        }},
        //利用计算属性computed来获取count值
//        computed:{
//            count(){
//                return this.$store.state.count;//需要加this
//            }
//        },
        //通过mapState的对象来赋值
//        computed:mapState({
//            count:function(state){return state.count}
//        }),
        //获取仓库状态,通过mapstate的数组赋值,最简单的写法，推荐
        computed:
        {...mapState(['count']),
        // count(){return this.$store.getters.count}
        // ...mapGetters(['count'])
        },
        //获取仓库方法，mapMutations的数组赋值,最简单的写法，推荐
        methods:{
            ...mapMutations(['add','reduce']),
            ...mapActions(['addActions','reduceAction'])
        
        },
        //调用仓库

        //getters
        store
    }
</script>

<style>
</style>

记得配置路由，ok，完成了