Vuex的使用

一、状态管理Vuex

1.Vuex使用

Vuex是一个专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生改变。

(1)组件间同步通信

存在于store文件夹下

import Vue from 'vue'
import Vuex from 'vuex'
import dailog from './modules/dailog'
Vue.use(Vuex);
//store‘全局’的对象
const store = new Vuex.Store({
    //共享参数只存在内存中
    state:{
        name:'shadow',
        isTabbatShow:true
        

    },
    modules:{
        dailog
    },
    //集中式修改状态
    mutations:{
    changeName(state,Name){
        state.name=Name
    },
        hide(state){
            state.isTabbarShow=false
        },
        show(state){
                        state.isTabbarShow=true

        }
    }
});
export default store;

在main.js中引入

• 访问

  this.$store.state.name
  

  在{{}}内可以省略’this’

• 修改

  this.$store.state.name='lihua'
  

• 会导致状态不可控

• 提交至store中修改

  Name='lihua'
  this.store.commit('changeName',Name)
  

  会被vue Devtools的时光旅行功能记录下来

• store配置持久化

• 控制组件

  <templete>
  <tabbar v-show='$store.state.isTabbatShow'></tabbar>
  </templete>
  <script>
  mounted(){
     //进入时隐藏 
      this.$store.commit('hide')
  }
    beforeDestory(){
        //离开显示
      this.$store.commit('show')
  
    }  
  </script>
  

(2)后端数据快照

• 异步请求

  
  import Vue from 'vue'
  import Vuex from 'vuex'
  import dailog from './modules/dailog'
  Vue.use(Vuex);
  //store‘全局’的对象
  const store = new Vuex.Store({
      //共享参数只存在内存中
      state:{
         
          List:[]
  
      },
      modules:{
          dailog
      },
      //集中式修改状态
      mutations:{
      setList(state.List){
  state.List=List
      },
          clearList(state){
              state.List=[]
          }
      },
      //异步
      actions:{
       getList(store,参数){
     return axios.get('').then(res=>{
          store.comit('setList',res.data)
      })
  },
      
  }
  });
  export default store;
  

  <templete>
  <tabbar v-show='$store.state.isTabbatShow'>
      
      </tabbar>
      <li v-for='data in $store.state.List'>
      </li>
  </templete>
  <script>
  mounted(){
      if(this.$store.state.List.length===0){
     //vuex异步流程
          this.$store.dispatch('getList',参数).then(res=>{
              组件渲染
          })
      }else{
          组件渲染
      },
          methods:{
  handleClearList(){
      this.$store.commit('clearList')
  }
          }
  </script>
  

  • 使用缓存的组件

    mounted(){
    if(this.$store.state.List.length===0{
    this.$store.sispatch('getList',参数)
    }else{
    
    }
    )
    }
    

  （3）Module

  • 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
  • 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

• //子module
  const module={
      namespaced:true //命名控件
  state:{
      log
  },
  muctations:{},
  actions:{}
  }
  export default module
  

• 
  import Vue from 'vue'
  import Vuex from 'vuex'
  //导入模块
  import Dailog from './modules/dailog'
  
  Vue.use(Vuex);
  //store‘全局’的对象
  const store = new Vuex.Store({
      //公共状态 共享参数只存在内存中
      state:{
      },
      //存放子模块
      modules:{
         Dailog
      },
      //集中式修改状态.监控
      mutations:{
          hide(state){
              state.isTabbarShow=false
          }
      },
      //异步
      actions:{
          getList(){
              
          }
      }
  });
  export default store;
  

• 引用

  //映射
  import {mapState} from 'vuex'//export {mapState}
  computed:{
      //去包装
      ...mapState('Dailog',['log'])
  }
  //直接得到log
  const _Dailog=this.log
  mounted(){
      console.log(mapState('Dailog'),['log'，'引用2'])
  }
  
  

  import {mapMutations} from 'vuex'
  methods:{
      ...mapMutations('Dailog',['hide']),
  }
      //得到方法hide，有参方法可传参
      this.hide()
  

  import {mapActions} from 'vuex'
  
  methods:{
  ...mapActions('Dailog',['getList'])
  }
  //得到方法getList
  this.getLst(参数)
  

  2.Vuex持久化

(1)安装插件

npm install --save vuex-persistedstate

(2)引用

import createPersistedState from 'vuex-persistedstate';
const store= new Vuex.Store({
    plugins:[createPersistedState()],
})

<div>
<input v-model='v'></input>
</div>
data(){
return {
vaulue :""
}
}
computed :{
 computedCinemaList(){
return this.$store.state.cinemaList.filter(item=>item.name.toUpperCase().includes(this.value.toUppercase)|| item.addrss.toUppercase.includes(this.value.toUppercase))
}
}