vuex是vue.js的状态管理器，实现各个页面数据共享，共分成5个部分：

• State：存储数据状态

• Getters: 状态获取

• Mutations：触发同步事件

• Actions: 提交mutation，异步操作

• Moudles：vuex模块

使用方法如下：

在 store/index.js中 新建vuex的store的实例，并注册各大模块

//index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import state from './state'
import getters from './getters'
import actions from './actons'
import mutations from './mutations'

const store = new Vuex.Store({state,getters,actions,mutations})
export default store

在 main.js 中导入并使用store实例

//main.js

import store from './store'
new Vue({
    el: '#app',
    router,
    store
})

下面分模块举例

目录

扫描二维码关注公众号，回复： 15728014 查看本文章

在state.js中定义一个name

在getters.js中取state中的值

在 mutations.js 中处理数据

在 actions.js 进行异步操作数据

在state.js中定义一个name

//state.js
export default {
    name: ''
}



//page.vue
computed:{
    name(){
        return this.$store.state.name;
    }
}

此取state方法不推荐，推荐在getters.js中取值，往下看

在getters.js中取state中的值

//getters.js
export default{
    getName(state){
        return state.name;
    }
}


//page.vue
computed:{
    name(){
        return this.$store.getters.getName;
    }
}

在 mutations.js 中处理数据

//mutations.js
//payload是一个json对象，用于传递数据的容器
export default{
    setNameMutation(state,payload){
        state.name = payload.name;
    }
}



//page.vue
//写法一
methods:{
    doMutaions(){
        this.$store.commit('setNameMutation',{ name:'修改name' })
    }
}
//写法二
methods:{
    doMutaions(){
        this.$store.commit({
            type:'setNameMutation'
            name:'修改name'
        })
    }
}

注：Mutation 必须是同步函数！！！如果是异步方法，我们不知道什么时候状态会发生改变，所以也就无法追踪了，如果需要异步操作，就需要actions了，actions本质还是使用mutations来改变数据

在 actions.js 进行异步操作数据

//actions.js
//context是上下文
export default{
    setNameStatic(context,payload){
         setTimeout(function(){
             context.commit('setNameMutation',payload)
         },100)
    }
}


//page.vue
methods:{
    doActions(){
        this.$store.dispatch('setNameStatic',{
            name:'acting'
        })
    }
}