Vuex

关于VueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理工具
大型项目使用为解决组件之间传递数据

之前处理方法:

父子组件传值、平行组件在跳转时，利用url，路由里的传
模式非常脆弱，通常会导致无法维护的代码

vueX的作用

vuex能够保存全局数据，供整个应用使用
vuex保存的数据是响应式的
vuex保存的数据可以跟踪状态的变化

使用步骤

安装

npm install vuex –save

创建对象 ./src/store/index.js下

//引入vueX
import Vuex from 'vuex'

//把vueX安装到Vue里
Vue.use(Vuex)

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

将vueX.store对象植入到vue的根属性 ./src/main.js

import store from './store'

new Vue({
    el: '#app',
    store
})

组件获取数据

//模板里：
$store.state.id
//脚本里
this.$store.state.id

vueX的核心概念：

04185834_TAxe.png

state : 数据仓库，存储所有的共享数据，相当于vue组件里的data 存放状态

export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    }
    ......
});


<!--获取-->
{{$store.state.age}}
{{$store.state.isAdult}}
{{$store.state.isAllowMarry?"可以结婚了":"不要着急，再等等"}}




//对state对象中添加一个age成员
Vue.set(state,"age",15)

//将刚刚添加的age成员删除
Vue.delete(state,'age')

Getter ：在state的基础上派生的数据，相当于vue组件里 computed 加工state成员给外界

Getters中的方法有两个默认参数

state 当前VueX对象中的状态对象
getters 当前getters对象，用于将getters下的其他getter拿来用

export default new VueX.Store({
    state:{
        age:12,
    },
    getters:{
        ageChina:state=>{
            let shi = parseInt(state.age/10); //1
            let ge = state.age%10;//2
            let str = "";
            switch(shi){
                case 1:str='一';break;
                case 2:str='二';break;
            }
            return str;
        }
    }
});
//获取
{{$store.getters.ageChina}}

Mutation：修改state的数据时，用mutation，这与跟踪状态有关系模块化状态管理

mutations方法都有默认的形参：

([state] [,payload])
state是当前VueX对象中的state
payload是该方法在被调用时传递参数使用的

export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    },
    // mutations：是跟踪状态。这里面只能有同步代码
    mutations:{
        incAge(state,num){
        state.age+=num;
    }
});

Action：解决mutation里只能有同步代码的问题action里可以有异步代码

Actions中的方法有两个默认参数

context 上下文(相当于箭头函数中的this)对象
payload 挂载参数

actions:{
    aEdit(context,payload){
        setTimeout(()=>{
            context.commit('incAge',payload)
        },2000)
    }
}

提交mutation（如果有异步就在action提交，如果没有异步就在组件里提交）

//组件里提交
$store.commit('incAge',num);
$store.commit('incAge',{ num:111 });
$store.commit({
    type:'incAge',
    payload:{
    age:15,
    sex:'男'
}
});


//action提交
$store.dispatch("incAge",num)

Action和mutation的区别

在代码的角度上，action是来提交mutation的
在用途上：区分 actions 和 mutations
并不是为了解决静态问题，而是为了能用 devtools 追踪状态变化。 vuex 真正限制你的只有 mutation 必须是同步的这一点。

关于Module

如果项目大的话全局数据太多会混乱，可以分类处理，分模块

./src/store/moduleA.js

export default {
    state: {count:1}, 
    mutations: { ... }, 
    actions: { 
         incCount(context){
            console.log("moduleA的action");
            setTimeout(()=>{
                context.commit("incCount");
            },2000);
        }
    }, 
    getters: { ... } 
}
                                                   
./src/store/moduleB.js

export default {
    state: {count:2}, 
    mutations: { ... }, 
    actions: { 
         incCount(context){
            console.log("moduleB的action");
            setTimeout(()=>{
                context.commit("incCount");
            },2000);
        }
    }, 
    getters: { ... } 
}

在总的store里包含所有的模块：

import Vue from "vue";
import vueX from "vuex";
import moduleA from "./moduleA";
import moduleB from "./moduleB";

Vue.use(vueX);

export default new vueX.Store({
    modules:{
        moduleA:moduleA,
        moduleB:moduleB
    }
    //简写：
    modules:{
        moduleA,moduleB
    }
});

使用

store.state.moduleA.count // -> moduleA 的状态
store.state.moduleB.count // -> moduleB 的状态

模块（Module）里的命名空间（namespaced:true）

模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

export default {
    namespaced:true,
    state:{
        count:1
    },
    mutations:{
    },
    actions:{        
    }
}

派发action时，加上模块名

this.$store.dispatch('moduleA/incCount');

vuex中mapState、mapMutations、mapAction的理解
https://blog.csdn.net/wangguoyu1996/article/details/80573113