vuex

vuex

什么是vuex？

Vuex 是专门为 Vue.js 设计的状态管理库，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex核心概念

成员列表：state、getters、mutations、actions、modules。

state 存放状态
mutations state成员操作
getters 加工state成员给外界
actions 异步操作
modules 模块化状态管理

1、state：vuex的基本数据，用来存储变量
2、getter：从基本数据(state)派生的数据，相当于state的计算属性
3、mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。

4、action：和mutation的功能大致相同，不同之处在于==》1.Action提交的是mutation，而不是直接变更状态。2.Action可以包含任意异步操作。
5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

Vuex安装与使用

1.安装

npm install vuex --save     // 如果安装了淘宝镜像，可以使用 cnpm安装

2.引入
1）在src文件夹下创建一个store文件夹，里面创建state.js，mutations.js，actions.js，getters.js和actions.js

2）state.js

const state={
    pushMenu:{},//当前侧边栏对象
}
export default state;

3)mutations.js

const mutations = {
    changeMenu(state,name){
        state.pushMenu=name;
    }
}
export default mutations;

4)getters.js

//getters接受state作为其第一个参数，接受其他作为第二参数，第二参数可省略
export const name = state =>state.name;

5)actions.js

//这个context对象具有与store实例相同的方法和属性
//可以调用context.commit 调用mutations，或者contetx.state获取state，contetx.getters获取getters
export function abc(context,payload){
    setTimeout(()=>{
        context.commit('changeName',payload)
    })
}

其中的index.js是把这几个js结合的

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import * as actions from './actions'//*星号是匹配符，这个是匹配actions的所有export function
import * as getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

6）在main.js中引入store文件夹下的Index.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'//引入store文件夹
import './assets/icons'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/css/reset.css'

Vue.config.productionTip = false
Vue.use(ElementUI);

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

然后在页面就可以使用啦
3.使用
1）改变state，调用commit触发mutations里的方法

methods:{
    pushMenu(item){
      this.$router.push({path:item.url})
      this.$store.commit('changeMenu',item)//调用commit触发mutations里的方法
    }
  },

2）调用state的数据

computed:{
    curMenuObj(){
      return this.$store.state.pushMenu;
    }
  },