Vuex 笔记

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

2、常用场景
一般用于大中型单页应用项目中，帮助我们管理组件内外共享状态。

3、Vuex与localStorage的区别
vuex是存储在内存中，页面刷新即失效，相当于全局变量的作用，但是和单纯的全局变量又有区别，Vuex 的状态存储是响应式的，并且不能直接改变 store 中的状态，只能通过commit mutation；localStorage存储在浏览器缓存中，只有当缓存失效或者手动清除浏览器缓存才会失效
注：可以使用localStorage存储信息来解决vuex刷新后数据被清除问题。

4、Vuex相关概念

a、核心是store，包含着应用中的大部分state
b、Getter: 有时候需要从store 中的 state 中派生出一些状态，可以认为store的计算属性,
使用方式常见如下：

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }

Getter 会暴露为 store.getters 对象
c、Mutation：更改state的方式是通过提交Mutation，它是同步的
d、Action：提交Mutation，不是直接变更状态，可以进行任意异步操作.通过 store.dispatch 方法触发,可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。

//分发方式
// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

actions: {
  actionA ({ commit },{ amount }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        amount++;
        resolve(amount)
      }, 1000)
    })
  }
}
store.dispatch('actionA',{amount:10}).then((amount) => {
    console.log(amount)
  // ...
})

5、代码结构

//modules/app.js
(每个modules都有自己的state、mutations、mutations)
const app = {
    state: {
        sidebar: {}
    },
    mutations: {
        TOGGLE_SIDEBAR: state => {
            
        }
    },
    actions: {
        ToggleSideBar: ({commit}) => {
            commit('TOGGLE_SIDEBAR')
        }
    }
};

export default app;

//modules/index.js
Vue.use(Vuex);
const store = new Vuex.Store({//创建实例
  modules: {
    app
  },
  getters 
});
export default store

//main.js
import store from './store'
new Vue({
    store,//注入，组件共享
    el: '#app',
    render: h => h(App)
})