vuex的使用

vue中

少量数据共享，父传子用属性绑定，子传父用的是事件绑定，兄弟传值需要借助evetbus

大量数据共享需要使用vuex，本质上是一个状态管理工具，可以看成是一个仓库，主要功能是数据共享和组件通信。

主要包括五种属性

state:用于存放共享数据，直接使用时采用this.$store.state.DateName调用

mutations：用于存放修改共享数据的方法，mutations中定义同步任务，使用时，通过在methods中添加函数，在函数使用this.$store.commit("MethodName")

actions：用于存放异步任务，需要间接触发mutations实现state数据的改变，在mutations中添加数据修改方法，在actions中添加异步操作，并用context.commit("MethodName")触发mutations操作，在methods中添加函数，在函数使用this.$store.dispatch("AsyncMethodName")

getters：用于存放计算属性，使用时通过this.$store.getters.MethodName

modules：用于将store拆分成小模块，每个模块都有自己的state,mutations,actions,getters
注意

• 1. 应用层级的状态都应该集中在store中

• 2. 提交 mutation 是更改状态state的唯一方式，并且这个过程是同步的。

• 3. 异步的操作应该都放在action里面

基本步骤

1.先导入vue，再导入vuex

2.创建vuex对象

const store=new Vuex.Store({...})

3.在父组件中添加store:store，父组件和其所有的子组件都可以使用

state

state用于保存共享数据

注意：

直接使用时采用this.$store.state.DateName调用

<div>{{this.$store.state.msg}}</div>

const store=new Vuex.Store({
    state:{
        msg:0;
    }
})

mutations

不推荐在组件中直接修改共享数据，如果多个组件都修改了共享数据，那么后期数据发生了错误，如果我们需要调试错误就需要吧每一个修改共享数据的组件都检查一遍

mutations用于保存修改共享数据的方法

注意：

1.mutations中定义的方法传参为state，可以通过state获得共享数据

2.使用时通过在method中添加函数，在函数使用this.$store.commit("MethodName")

3.第二种方式时引入mapMutations函数，对mutations中的方法做一个映射

<div @click="add()"> </div>

const store=new Vuex.Store({
    state:{
        msg:0;
    },
    mutations:{
        mAdd(state){
        state.msg++
        }
})

methods:{
    add(){
    this.$store.commit("mAdd");
    }
}

有参数时

const store=new Vuex.Store({
    state:{
        msg:0;
    },
    mutations:{
        mAdd(state，step){
        state.msg=state.msg+step
        }
})

methods:{
    add(){
    this.$store.commit("mAdd",3);
    }
}

actions

mutations中不能执行异步操作，不能触发state数据的修改，页面上展示的会被修改

actions用于触发异步任务，action中也需要间接触发mutations改变数据

actions不能修改state，只有mutation可以，因此需要间接触发mutations

注意：

1.需要在mutations中添加同步方法

2.在actions中添加异步方法，接受的参数为context，利用context.commit("MethodName")触发同步操作

3.使用时通过在method中添加函数，在函数使用this.$store.dispatch("AsyncMethodName")

4.第二种可以通过mapActions函数触发actions,映射为methods方法

const store=new Vuex.Store({
    state:{
        msg:0;
    },
    mutations:{
        mAdd(state){
            state.msg++
        }
    },
    getters:{
    },
    actions:{
        addAsync(context){
            setTimeout(()=>{
                context.commit('mAdd')
            })
        }
    }

})

methods:{
    add(){
    this.$store.dispatch('addAsync');
    }
}

携带参数时

const store=new Vuex.Store({
    state:{
        msg:0;
    },
    mutations:{
        mAdd(state,step){
            state.msg+=step
        }
    },
    getters:{
    },
    actions:{
        addAsync(context){
            setTimeout(()=>{
                context.commit('mAdd',step)
            })
        }
    }

})

methods:{
    add(){
    this.$store.dispatch('addAsync',3);
    }
}

 getters

getters用于保存计算属性，计算属性会被缓存，多次使用只执行一次

数据在data中则使用computed计算，数据在state中则使用getter计算

注意：

1.getters中定义的方法传参为state，可以通过state获得共享数据

2.使用时通过this.$store.getters.MethodName

<div>{{this.$store.getters.formate}}</div>

const store=new Vuex.Store({
    state:{
        msg:"Hello World";
    },
    mutations:{
    },
    getters:{
        formate(state){
            return state.msg+"Hello Bourbon"
        }
    }

})

modules

modules用于将store拆分成小模块

每个模块都有自己的state,mutations,actions,getters

const moduleA = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
 
const moduleB = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});
 
store.state.a // 获取moduleA的状态
store.state.b // 获取moduleB的状态