Vuex基础浅析

1.Vuex是什么？

Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享。

2.使用Vuex统一管理状态的好处

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护
2. 能够高效的实现组件直接得数据共享，提高开发效率
3. 储存在vuex中的数据都是响应式的，能够实现数据与页面的同步

3.什么样的数据储存在Vuex中

一般情况下，只有组件之间共享的数据，才有必要储存在vuex中，对于组件的私有数据，依旧储存在自身的data中即可。

4.下载和使用Vuex

1. 下载

    npm install vuex -S   //S代表生产环境使用

2. 导入vuex包
   这个是在main.js中导入

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

3. 创建store对象

const store = new Vuex.Store({
	state:{count:0}   //state中存放的就是全局共享的数据
}) 

4. 将store对象挂载到vue实例中

new Vue({
    
    
	el:"#app",
	render:h => h(app),  //渲染app和组件
	router,              //挂载路由
	store				
})

5.Vuex的核心概念

• State
• Mutation
• Action
• Getter

State: 提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行储存

// 创建store数据源，提供唯一的公共数据
const store = new Vuex.Store({
    
    
	state:{
    
    count:0}
})	

mutations: mutations里面是如何更改state中状态的逻辑。更改Vuex中的state的唯一方法是，提交mutation，即store.commit(‘increment’)。

actions: 因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么actions就是为了异步操作而设置的。这样，就变成了在action中去提交mutation，然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数。

Getter: 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。此时可以用到getters，getters可以看作是store的计算属性，其参数为state。

const store = new Vuex.Store({
    
    
  state: {
    
    
    todos: [
      {
    
    id: 1, text: 'reading', done: true},
      {
    
    id: 2, text: 'playBastketball', done: false}
    ]
  },
  getters: {
    
    
    doneTodos: state => {
    
    
      return state.todos.filter(todo => todo.done);
    }
  }
});