VUEX使用笔记

vue2下的vuex的使用

cnpm install -S vuex
//安装vuex开发依赖

在根目录下创建一个名为store的文件夹，并在里面创建一个名为index.js（或xxx-store）的js文件
1、在store/index.js中分别导入vue和vuex

import Vue from 'vue'
import Vuex

2、引用vuex

Vue.use(Vuex);

3、开始对vuex进行配置

export default new Vuex.Store({
	// 设置vuex的运行模式，true为调试模式，false为生产模式
    strict: true,
    // 相当于vue里面的data
    state: {
        bookInfo: []		//===>通过 this.$store.state.数据名
    },
    // 相当于vue的计算属性（computed）
    getters: {
        // getters允许有两个参数：第一个可以访问state内的值。第二个值是一个对象，这个对象内的属性就是所有getters的值
        bookListCount(state,otherGetters) {
            // 可在控制台中展开查看输出的那个对象
            console.log(otherGetters);
            return state.bookInfo.length;
        },
        test1() {
            return "abc";
        },
        test2() {
            return "测试值"			//=======>通过this.$store.getters.方法名
        }
    },
    // vuex独有的“修改器”，用于修改状态（也就是state内的属性）,事件执行需要传入state作为首个参数
    mutations: {
        /**
         * 重新加载由actions执行后传入的AJAX数据
         * @param {Object} state 接收state对象内定义的属性state.名
         * @param {Array} data 接收action内同名方法执行后commit（相当于vue的$emit）发送的数组参数
         * 方法名（state中的值，action调用时传入参数）
         */
        runBookInfoLoad(state,data) {
            state.bookInfo = data;
        },
        /**
         * 添加新图书信息
         * @param {Object} newBook 新的图书对象
         */
        addBookInfo(state,newBook) {
            state.bookInfo.push(newBook); //==========>通过this.$store.commit("方法名")
        }
    },
    // 相当于是vue里的方法/事件（methods），它能够执行异步事件（如AJAX请求事件）
    actions: {
        /**
         * 执行AJAX操作请求数据并发送给mutations去执行具体操作
         * @param {Object} context 当前上下文产生的事件对象（区别于JS的事件对象）
         * context包含了2个方法：commit（在vuex中传递数据给mutations）和dispatch （调用actions在其他页面）
         * context包含了4个子对象：state、getter、rootState、rootGetter
         */
        loadBookInfo(context) {
            axios.get('../../static/book-info.json').then((res) => {
                // context.commit 去调用mutations的方法并且传值
                context.commit('runBookInfoLoad', res.data);
            }).catch(() => {
                console.error('数据加载错误');
            });
            // 点击首页“加载数据”按钮后在控制台查看对象组成
            console.log(context);   //========> this.$store.dispatch("方法名")
        }
    }

})