vuex的使用

前言

使用vuex之前：

 vue中各个组件之间传值
   1.父子组件
   父组件-->子组件，通过子组件的自定义属性：props
   子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...);

   2.非父子组件或父子组件
   通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...)

   方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。
   方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

1.理论知识

概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库）， 让其在各个页面上实现数据的共享包括状态，并且可操作

Vuex分成五个部分：
   1.State：单一状态树（定义数据）
   2.Getters：状态获取（获取数据）
   3.Mutations：触发同步事件（是数据改变的唯一方式，同步方式）
   4.Actions：提交mutation，可以包含异步操作（是异步数据更改方式，本质上就是mutations）
   5.Module：将vuex进行分模块

2.vuex的使用

（1）安装vuex(指定版本下载）

npm install vuex@3.4.0 -S

（2）创建store模块，分别维护state/actions/mutations/getters

 （3）在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

import Vue from 'vue'
import Vuex from 'vuex'
import vuexPersistedstate from 'vuex-persistedstate'

Vue.use(Vuex)
//分别导入其他相应的模块
import state from '@/store/state'
import getters from '@/store/getters'
import mutations from '@/store/mutations'
import actions from '@/store/actions'
// 在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})
export default store

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

import store from '@/store'

new Vue({
  el: '#app',
  router,
  store,//再main.js中引用store实例
  components: { App },
  template: '<App/>'
})

4. vuex的核心概念：store、state、getters、mutations、actions

（1）store

       每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

import Vue from 'vue'
import Vuex from 'vuex'
import vuexPersistedstate from 'vuex-persistedstate'

Vue.use(Vuex)
//分别导入其他相应的模块
import state from '@/store/state'
import getters from '@/store/getters'
import mutations from '@/store/mutations'
import actions from '@/store/actions'
// 在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块
const store = new Vuex.Store({
    state,    // 共同维护的一个状态，state里面可以是很多个全局状态
    getters,  // 获取数据并渲染
    actions,  // 数据的异步操作
    mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
})
export default store

（2） state(保存数据的容器)

状态，即要全局读写的数据

export default {
  hotalName:'金州勇士主场',
  collapsed:false
}

不建议使用以下方法去拿数据

 this.$store.state.resturantName;//不建议

（3）getters

 获取数据并渲染

export default {
  getHotalname:(state)=>{
    return state.hotalName;
  },
  getCollapsed:(state)=>{
    return state.collapsed;
  }
}

正确方式（state状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态）

computed:{
      hotalName:function(){
        return this.$store.getters.getHotalname
      }
}

（4） 处理数据的唯一途径，state的改变或赋值只能在这里

export default {
  //mutations是数据改变的唯一方式，同步方式
  //type:事件类型可以理解为方法名
  //state：数据状态的定义
  //payload：载荷，本质上就是一个json对象，用于传递数据的容器
  setHotalname:(state,payload)=>{
    state.hotalName=payload.name;
  },
  setCollapsed:(state,payload)=>{
    state.collapsed=payload.collapsed;
  }
}

注1：mutations中方法的调用方式
           不能直接调用this.$store.mutations.setResturantName('KFC')，必须使用如下方式调用：
           this.$store.commit(type,payload);

 //正确方式
      doMutations(){
        this.$store.commit('setHotalname',{
          name:'热火队主场'
        })
      }

  注2：一定要记住，Mutation 必须是同步函数。为什么呢？异步方法，我们不知道什么时候状态会发生改变，所以也就无法追踪了
           如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了

（5） actions(数据的异步async操作）

同步：同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去

异步：异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

   Action类似于 mutation，不同在于：
   1.Action提交的是mutation，而不是直接变更状态
   2.Action可以包含任意异步操作
   3.Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性
     但是他们并不是同一个实例，context 包含：
     1. state、2. rootState、3. getters、4. mutations、5. actions 五个属性
     所以在这里可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

注意：

VUEX 的 actions 中无法获取到 this 对象
如果要在actions 或者 mutations 中使用this对象。可以在调用的时候把this对象传过去

定义

export default{
//actions是异步数据更改方式，本质上就是mutations
//payload:用于承载数据的容器，就是json
//context:上下文
  setHotalnameStatic:(context,payload)=>{
    setTimeout(function(){
      context.commit('setHotalname',payload);
    },3000)
  },
  setHotalnameDynamic:(context,payload)=>{
     let _this=payload._this;
     let url=_this.axios.urls.VUEX_MANGER;
     let params={
       methodName:'queryVuex',
       resturantName:payload.name
     };
     _this.axios.post(url,params).then(resp=>{
       console.log(resp.data.msg);
      context.commit('setHotalname',{name:resp.data.msg});
     }).catch(erro=>{
       console.log(erro);
     })
    }
}

获取

 doActionStatic(){
        this.$store.dispatch('setHotalnameStatic',{
          name:'骑士队主场',
        })
      },
      doActionDynamic(){
        this.$store.dispatch('setHotalnameDynamic',{
          name:'公牛队主场',
           _this:this
        })
      }

5.vuex的数据持久化

（1）安装vuex-persistedstate

npm install vuex-persistedstate -S

（2）配置

将其配置在store上下文

import vuexPersistedstate from 'vuex-persistedstate'

（3）存储到sessionStorage

const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  // plugins: [vuexPersistedstate()], //默认存储到localStorage,刷新页面不会刷新数据，但是关闭会话会刷新数据
  plugins:[vuexPersistedstate({storage:window.sessionStorage})]//存储到sessionStorage，刷新页面和关闭会话都不会刷新数据
  //指定数据持久化
   //val为state中的数据
   reducer(val) {
    return {
      //存储state中的hotalName
      hotalName: val.hotalName
    }
  } 
})