vux状态管理工具怎么用

1. 前言

2. 目录结构

3. 路由

4. vuex状态管理

1.前言
前段时间拔完牙，吃太多止痛+消炎药，副作用是打嗝。完全没预料的是闺蜜的一顿虾居然加重了打嗝频率睡不着。于是乎出一点产量，今天的内容是状态管理工具vuex。
在vue中，vuex可以很好的实现非父子组件之间的数据传递，同时vuex还可以用来做缓存。在这里以一个小demo为例。
先看效果：
2.目录结构

3.路由

//一共三个页面
const Index=()=>import('../pages/index');
const Detail=()=>import('../pages/detail');
const Collection=()=>import('../pages/collection')

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },{
      path: '/detail',
      name: 'detail',
      component: Detail
    },{
      path: '/collection',
      name: 'collection',
      component: Collection
    },{
      path: '*',
      redirect:'/'
    }
  ]
})

从index页跳到详情页用的是动态路由

<router-link :to="'/detail?id='+item.id">{{item.title}}</router-link>

4.vuex状态管理

关键时刻来啦（敲黑板）
（1）安装：npm install vuex --save(或者cnpm install vuex --save)。
（2）在store下的index.js中写状态管理的相关代码

import vue from 'vue';//引入vue
import vuex from 'vuex';//引入vuex
import { requestList, requestDetail } from '../util/request';//引入数据请求函数
vue.use(vuex);//vue使用vuex
const state={
    list:[],
    detail:{},
    collection:[]
};
const mutations={
    setList(state,arr){
        state.list=arr
    },
    setDetail(state,obj){
        state.detail=obj
    },
    collect(state,detail){
        var findIndex=state.collection.findIndex(item=>{
            return item.id==detail.id
        })
        if(findIndex==-1){
            state.collection.push(detail)
            console.log(state.collection)
        }else{
            return false
        }
       
    },
    cancel(state,id){
        var ind=state.collection.findIndex(item=>id===item.id);
        state.collection.splice(ind,1);
    }
};
const actions={//可以用来处理异步
    getList(context){
        if(context.state.list.length>0){
            return false
        }
        requestList().then(res=>{
            context.commit('setList',res.data)
        })
    },
    getDetail(context,id){
        requestDetail(id).then(res=>{
            context.commit('setDetail',res.data)
        })
    },
    collect(context,detail){
        context.commit('collect',detail)
    },
    cancel(context,id){
        context.commit('cancel',id)
    }

};
const getters={//可将状态批量导出
    list(state){
        return state.list
    },
    detail(state){
        return state.detail
    },
    collection(state){
        return state.collection
    },
    isCollect(state){
        return state.collection.some(item=>item.id==state.detail.id)
    }
}
const store=new vuex.Store({
    state,
    mutations,
    actions,
    getters
})
export default store

（3）main.js页面引入store并导出

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})

（4）以首页为例，在页面中引入import {mapGetters,mapActions}from 'vuex'
因为mapGetters和mapActions分别对接到computed和methods中，代码如下

computed:{
        ...mapGetters([
            "list"
        ])
    },
    methods:{
        ...mapActions([
            "getList"
        ])
    },
    mounted(){
        this.getList()
    }

在这里我们就可以把数据拿来渲染页面啦，渲染的结果请看前言图片

<template>
  <div>
      <h1>index</h1>
      <div v-for="item in list" :key="item.id">
          <router-link :to="'/detail?id='+item.id">{{item.title}}</router-link>
      </div>
  </div>
</template>