vuex的store机制1

vuex的核心是store,它将包含你程序中的大多数状态。但是和全局对象又有所不同。

1.vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效的更新。

2.不能直接更改store中的状态，改变的唯一途径就是commit

安装请自行百度

最简单的store如下：

/ 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

调用方式：store.state 获取状态 store.commit触发变更
store.commit('increment')


下面写一个完整的例子

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export const store = new Vuex.Store({
    state:{//设置属性 用来存储数据
        message:{}
    },
    getters:{//对应方法 用来获取属性的状态
        getMessage:state => state.message,
    },
    mutations:{//更改属性的状态
        setMessage(state, data){
            state.message = data
        }
    },
    actions:{//应用 mutation
        setMessage({commit},data){
             commit('setMessage',data)  
      }
    }
})

getters方法就是供外部可以获取，this.$store.getters.getMessage  这样的方式使状态不会暴露在外面

actions方法就是提交mutations触发的状态改变，唯一不同的是actions方法里可以做异步的处理而mutations只能做同步的状态改变。

this.$store.dispatch('setMessage',data)

this.$store.commit('setMessage',data)