vue 中 store的使用

安装  vuex

npm install vuex --save   或者  cnpm install vuex --save 

1. 在package.json查看是否已安装vuex，在store目录下

module下存放不同模块 方便区分

type.js 中存放类型常量

2. 在main中引入

test.js

import types from "../types";

// 全局变量
const state = {
    count: 6
};

// 用来获取属性
const getters = {
    count(state) {
        return state.count;
    },
    count1(state) {
        return state.count;
    },
    isEvenorOdd(state) {
        return state.count % 2 == 0 ? "偶数" : "基数";
    }
};

// 定义方法，要执行的操作 流程判断/异步请求等
const actions = {
    // increment(context) {
    //   // 包含 commit dispatch state...
    //   console.log(context);
    // },
    increment({ commit }) {
        commit(types.INCREMENT); // 修改数据的唯一方式就是显示的提交mutation
    },
    decrement({ commit, state }) {
        if (state.count > 10) {
            commit(types.DECREMENT);
        }
    },
    // 模拟异步请求
    postPromise({ commit }) {
        var test = new Promise(resolve => {
            setTimeout(() => {
                resolve();
            }, 3000);
        });
        test
            .then(() => {
                commit(types.INCREMENT);
            })
            .catch(() => {
                console.log("错了");
            });
    }
};

// 处理状态（数据)的改变
const mutations = {
    // 用一个变量来做名称 放在中括号里
    [types.INCREMENT](state) {
        // add名称同actions中的commit
        state.count++;
    },
    [types.DECREMENT](state) {
        state.count--;
    }
};

export default {
    state,
    getters,
    actions,
    mutations
};
3. 两种方式来获取

3. 两种方式来获取

a. mapGetters,mapActions

b. this.$store   这个用得多

import { mapGetters, mapActions } from "vuex";
...
computed: {
    count() {
        return this.$store.state.test.count;
    },
...mapGetters(["count1"])
},
methods: {
...mapActions(["increment", "decrement", "postPromise"]),
        add() {
        this.$store.dispatch("increment");
    },
}

坚持学习，成就自我

• 上一篇： npm run build和webpack的区别
• 下一篇： 如何写日志(logging)