vue2.0 Vuex教学

vuex 是一个专门vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，并以响应规则保证状态以一种可预测方式发生改变。
.1. 安装
npm install vuex --save
2. 引入
在main.js引入，文件夹 sore index.js引入

3. 模块化 在store文件夹下建立自己要存储数据文件夹modules里面添加自己模块这里建立user

user.js 代码如下

const user={
     state: null != window.sessionStorage.
    getItem('state')?JSON.parse(window.sessionStorage.
        getItem('state')):{//存储对象，存储所有组件状态,判断初始状态
        user:{
        name:''
        }
    },
      getters: {//得到对象，唯一取值,计算属性
        getUser(state){
        return state.user;
        }
    },
      mutations: {// 唯一修改state值 同步方法
        updateUser(state,user){
        state.user = user;
        }
    },
      actions:{//移步调用mutations
        asyncUpdateUser(context,user){
        context.commit('updateUser',user);
        }

    },
}   

export default user;//暴露属性

修改index.js文件

解决浏览器刷新后vuex 数据消失

产生原因：vuex存储数据是在页面中，相当于定义全局变量，刷新后，数据恢复到初始化状态，但是这种情况并不是我们所希望的。
解决方法：监听页面是否刷新，如果页面刷新将state·对象存储到seesionStorge,页面打开后判断sessionStorge是否存在state存在说明页面是刷新过否则设置初始值。
App.vue增加监听刷新事件

export default{
  name:'App',
  methods:{
    saveState(){
      window.sessionStorage.setItem('state',JSON.stringify(this.$store.user))
    }
  },
  mounted(){
    window.addEventListener('unload',this.saveState);
  }
}

完成上述将建立一个小型登录页面 记录如何具体使用

一、Login页面

1. 新建Login.vue页面