Vuex的基本使用

什么是Vuex

专为Vue.js应用程序开发的状态管理模式，实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

使用vue统一管理数据的好处:

①在vueX中集中管理共享的数据，易于开发和维护

②高效的实现组件之间数据的共享，提高开发效率

③存储的数据是响应式的，能够实时保持数据与页面的同步

一般情况下，只有组件共享的数据才有必要存储在vuex中，其他的不重要的数据可存在自身的data中就行了

Vuex的基本使用

一：安装vuex依赖包

npm  install vuex --save

二：导入vuex包

import Vuex from "vuex"     
Vue.use(Vuex)

三：创建store对象

const store = new Vuex.store({

//  state 中存放的就是全局共享的数据

state:{  count:0  }

})

四：将store挂载到vue实例对象中

var vm = new Vue({

//将创建的共享数据对象挂载到Vue实例中     //所以的组件就可以直接从store中获取到全局数据

store

})

Vuex的状态信息

• 一：state:驱动应用的数据源（初始化状态）

  //单一状态树
  const store = new Vuex.Store({
   
    state: {
      // 全局存储token
      token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
      active: 0, //全局导航栏的变色管理
    },
   
    mutations: {
      increment(state){
          state.count ++   //改变state的值
      }
    },
      getters: {
      
    },
    actions: {
      
    },
    modules: {
      
    }
  });
  export default store;
  组件中使用state
  this.$store.state.xxx
  或
  computed:{
      increment（）{
      	this.$store.commit(' increment')   //设置一个点击方法，就会触发state.active ++
  	},
       count(){   //直接渲染方法
           return store.state.active    //使用：{{count}}
       }
  }
  
  

• 二：mutations（处理状态）

  //单一状态树
  const store = new Vuex.Store({
   
    state: {  //初始化状态
      active: 0, //全局导航栏的变色管理
    },
   
    mutations: {  //处理状态
       increment(state){
           state.active++
       }
    },
      getters: {    //处理列表项
         
      
    },
    actions: {  // 提交改变后的状态
          
    },
    modules: {
      
    }
  });
  export default store;
  组件中使用mutations
  computed:{
      increment（）{
      	this.$store.commit(' increment')   //设置一个点击方法，就会触发state.active ++
  	},
  }
  
  

• 三 ：getters（处理列表项）

  //单一状态树
  const store = new Vuex.Store({
   
    state: {  //初始化状态
     todos:[
  
         {id:1, text: '...' ,done: true},
  
         {id:2,text:'...',done: false}
  
     ]//全局导航栏的变色管理
    },
   
    mutations: {  //处理状态
      
    },
      getters: {    //处理列表项
          someLists: state =>{
              return state.todos.filter((todo) => todo.done)
          }
      
    },
    actions: {  // 提交改变后的状态
    },
    modules: {
      
    }
  });
  export default store;
  组件中使用getters
  this.store.getters.someLists
  computed:{
      getters（）{
      	return this.$store.state.todos.filter(todo => todo.done).length
  	},
  }
  

• 四：actions(提交改变后的状态)

  //单一状态树
  const store = new Vuex.Store({
   
    state: {  //初始化状态
      active: 0, //全局导航栏的变色管理
    },
   
    mutations: {  //处理状态
        increment(state){
           state.active++
       }
    },
      getters: {    //处理列表项
      
    },
    actions: {  // 提交改变后的状态
          increment(context, param) {
              context.state.active+= param.step;
              context.commit('increment', context.state.active)//提交改变后的state.count值
          },
    },
    modules: {
      
    }
  });
  export default store;
  组件中使用actions
  methods:{
      increment（）{
      	this.$store.dispatch(' increment')   //设置一个点击方法，就会触发state.active ++
  	},
  }
  

  五：参考文档

  亚连