vuejs学习——vue+vuex+vue-router项目搭建(三)

　为什么用vuex：组件之间的作用域独立，而组件之间经常又需要传递数据，项目比较小的话传递数据还好，越大的项目，涉及的组件通信就越多、越频繁，此时管理起来就会非常累，而且容易出错，这就是 Vuex 的意义所在。它可以将数据置于单独的一层，并提供给外部操作内部数据的方法。粗俗一点，就这样理解吧。vuex1.0官网

Vuex下载 

$ cnpn install  vuex@1.0 --save

　　现在使用vue1.0的生态的话都要加上版本号，不是默认都是最新版本，而vue1.0只能配合版本1来使用。

Vuex引入

　　接下来我们在vuex文件夹新建 store.js(初始化的 state 对象)和actions.js（定义动作）

　　store.js代码如下：

//引入相关文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//定义初始化变量const state = {
    list:[{
        name:'张三'
    }],
    count:0}//定义动作const mutations = {//模仿ajax获取新数据后 动态更新data    GETLIST (state, amount) {
        state.list = amount
    },    //官方例子，加减    INCREASE(state, amount){
        state.count=state.count+amount
    },
    REDUCE(state,amount){
        state.count=state.count-amount
    }
}

export default new Vuex.Store({
    state,
    mutations
})

网友评论