vuex 使用

创建一个store.js文件:

复制代码

import Vue from "vue";

import Vuex from "vuex";

 

Vue.use(Vuex);



const store = new Vuex.Store({
    //这里的state必须是JSON,是一个对象
    state: {
        count: 0         //这里就是初始值的罗列
    },
    //突变,罗列所有可能改变state的方法
    mutations: {
        //没有所谓的大写字母的Type了,就是一个一个函数  
        add (state) {
              state.count++;   //直接改变了state中的值,而并不是返回了一个新的state
        },
        minus (state) {
            state.count--;
        }
    }
});

export default store;
复制代码

天生任何组件都可以“通天”,没有connect和Provider(react中的中间件),仅需要在computed中使用store.state.**字样或者在mehotds中使用store.commit(**)字样即可。

在组件内部使用store很简单,单独引用store即可:

复制代码
<style scopoed>
 
</style>

<template>
    <div>
        我是子组件
        <h1>
            <button v-on:click="minusnandler">减少</button>
            {{count}}
            <button v-on:click="addhandler">增加</button>
        </h1>
    </div>
</template>

<script>
    import store from "./store.js";
    export default {
        computed : {
            count(){
                return store.state.count;
            }
        },
        methods : {
            addhandler(){
                store.commit("add");
            },
            minusnandler(){
                store.commit("minus");
            }
        }
    }
</script>
复制代码

和Redux相比,减少了Action和Reducer。因为Vuex中简化了Store的书写,Store中并不存在这样的写法:

(state,action)=>{
根据action返回新state
}

而是变为了:

new Vuex.Store({
state:{

},
mutations : {
     //罗列一些函数,可以直接改变state的值
}
})

 

posted @   yun迹  阅读(176)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示