vue项目 store.js使用

48 阅读 0 评论 32 点赞

我是靠谱客的博主可靠身影，最近开发中收集的这篇文章主要介绍vue项目 store.js使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

准备工作：

1.安装依赖

npm install vuex

2.创建store文件夹以及store.js文件在根目录下，当然，这是因为我是用cil3创建的项目，导致没有store文件以及store.js文件

对了，如果你是在src文件夹下创建store文件夹，nastore.js要改名为index.js

开始：

1.直接上代码，这一步没啥好说

import vue from 'vue'
import  vuex from 'vuex'
vue.use(vuex);

2.还是上代码，这个倒是有点说法

export default new vuex.Store({
    state: {
        id:0,
        password:'',
        name:''

    },
    mutations: {
        setId(state,data){
            state.id = data;
        },
        setPassword(state,data){
            state.password = data;
        },
        setName(state,data){
            state.name = data;
        }
    },
    getters: {
        getId: state => state.id,
        getPassword: state => state.password,
        getName: state => state.name
    },
    actions:{
        setId(context,data){
            context.commit('setId',data)
        },
        setPassword(context,data){
            context.commit('setPassword',data)
        },
        setName(context,data){
            context.commit('setName',data)
        }
    }
});

state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。

mutations，个人理解为下面的方法就是java中的set方法，改变state中定义内容的唯一方法，当然，执行这个方法需要用到store.commit('','')（这个在后面组件中会提到）

getters，getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。

action，在store.js中提交mutations，跟我们在组件中使用一样，但是他们的调用方式不同

当然，还有module，但是具体怎么用我也不是很了解

store是什么我们了解了以丢丢，现在该是怎么用store了

直接上代码，我相信你们也不想听我bb，还是自己运行代码比较了解

<script>
    import store from '/store/store'
    export default {
        name: "Test1",
        data(){
            return{
                id: store.state.id,
                password: store.state.password,
                name: store.state.name,
            }
        },
        methods: {
            useAction(){
                store.dispatch('setId',20);
                store.dispatch('setPassword','666666');
                store.dispatch('setName','study');
            },
            useMutations(){
                store.commit('setId',10);
                store.commit('setPassword','123456');
                store.commit('setName','vuex');
            },
            getAction(){
                console.log(store.getters);//懒人输出，直接调用getter
            }
        }
    }
</script>

ok，BB了这么多，该看看他的运行结果了