大道至简 vuex的使用

使用vuex之前，电脑要安装好node.js 以及vue-cli脚手架，最好是安装淘宝镜像cnpm

第一步：安装vuex包，cnpm install vuex

第二步：创建vuex实例，细节如下

1.打开main.js，引入vuex

import Vuex from 'vuex'

2.使用Vue.use注册一下

Vue.use(Vuex)

3.实例化一个vuex，并且添加一个初始化的state对象，假设登录状态默认为false

const store = new Vuex.Store({
    state:{
      sign:false
    }
})

4.把vuex实例挂载到vue对象中去

第三步：视图层获取state中的状态，因为vuex被挂载到了vue对象中，也就是全局的this上，所以用this可以获取相对应的值

{{this.$store.state.sign}}

第四步：控制登录的状态，使用mutations。

mutations是vuex设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。切记：Vuex中store数据改变的唯一方法就是mutation！

const store = new Vuex.Store({
    state:{
      sign:true
    },
    mutations:{
      signin(state){
        state.sign=true;
      },
      signout(state){
        state.sign=false
      }
    }
})

视图层中根据vue的语法，使用commit方法调用signout

<template>
    <button @click="signout">退出登录</button>
</template>

<script>
export default {
  methods: {
    signout(){
      this.$store.commit("signout");
    }
  },
}
</script>