状态管理与vuex

状态

表示用户的数据，或者是表示页面状态的一些变量（显示隐藏）

• 分类

1. UI状态
2. 用户状态
   两者区别：如果一个状态需要存到MySQL里面name就是用户状态否则就是UI状态

Vuex之store

用来管理状态，共享数据，在各个组件之间管理外部状态
如何使用？
第一步：在main.js中全局引入vuex，并通过use方法使用它

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

第二步： 创建状态仓库（注意必须是Store,state不能改成别的名字），在实例中使用它

var store = new Vuex.Store({
  state: {
    //这里面是你要共享的数据，在所有组件中都可以访问的
    message: 88
  }
})

new Vue({
  el: '#app',
  router,
  store, //就相当于store: store
  components: { App },
  template: '<App/>'
})

第三步：通过this.$sore.state.XXX直接拿到需要的数据

这里通过组件中的计算属性来获取
{{getMessage}}  
computed: {
        getMessage(){
            return this.$store.state.message
        }
 }

Vuex的相关操作

vuex状态管理的流程
view———­>actions———–>mutations—–>state————­>view

在组件中改变全局中的状态

1.通过mutations，里面定义的方法必须传入state
var store = new Vuex.Store({
  state: {
    message: 88
  },
  mutations: {
    getAdd(state){
      return state.message+=1
    },
    getmul(state){
      return state.message-=20
    }
  }
}

然后在组件中使用
<button @click="sadd">子组件---通过mutations改变全局状态</button> 
methods: {
    sadd(){
        //此处的getAdd是你在mucations中定义的方法名
        return this.$store.commit('getAdd')
    }
}

2.通过actions修改状态,actions里面要传入context上下文对象
var store = new Vuex.Store({
  state: {
    message: 88
  },
  mutations: {
    getmul(state){
      return state.message-=20
    }
  },
  actions: {
    a(context){
      context.commit('getmul')
    }
  }
}

在组件中使用
<button @click="c">子组件---通过actions改变全局状态</button>
methods: {
    c(){
        return this.$store.dispatch('a')
    }
}

通过getters可以对你全局状态中的数据做限制，比如让它操作点击按钮累减的时候值不能小于零

var store = new Vuex.Store({
  state: {
    message: 88
  },
  getters: {
    e(state){
      return state.message>0 ? state.message : 0
    }
  }
})

在组件中使用
{{getMessage}}
computed: {
    getMessage(){
        return this.$store.state.message
    }
}

注意：actions提交的是mutation,而不是直接变更状态
actions可以包含异步操作，但是mutation只能包含同步操作

actions: {
  a(context){
    setTimeout(()=>{
      context.commit('getmul')
    },2000)
  }
}

最后在你的src文件下新建一个state文件，里面一个index.js将你所有的状态相关的代码写在这里面，然后导出，在main.js里面引入一下

如何在vuex中获取vue实例

通过this._vm即可