vue+element UI 学习总结笔记（十七)_vuex在项目中的应用

what is vuex?

vuex is a state management pattern + library for Vue.js applications

vuex

参考（抄袭）：vuex的简单使用

作用：

vuex解决了组件之间共享同一状态的麻烦问题。当我们的应用遇到多个组件共享状态时，会需要：

1. 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做法。

2. 来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱，通常会导致无法维护的代码。来自官网的一句话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了。问题就自然解决了。

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。

什么可以用：

(需要牢记的一张图) 

• state (类似存储全局变量的数据)
  getters (提供用来获取state数据的方法)
  actions (提供跟后台接口打交道的方法，并调用mutations提供的方法)
  mutations (提供存储设置state数据的方法)

我理解action中的方法，类似事件，只是在vuex中注册，需要通过dispatch触发这个方法

mutation中的方法，类似事件，只是在vuex中注册，需要通过commit触发这个方法

ps:(官网上说的几个概念)

It is a self-contained app with the following parts:

• The state, the source of truth that drives our app;
• The view, a declarative mapping of the state;
• The actions, the possible ways the state could change in reaction to user inputs from the view.

This is an simple representation of the concept of "one-way data flow":

However, the simplicity quickly breaks down when we have multiple components that share a common state:

• Multiple views may depend on the same piece of state.
• Actions from different views may need to mutate the same piece of state.

Vuex 的内脏由五部分组成：State、Getter、Mutation、Action 和 Module。

项目中引入vuex,见下图：关键字：Vue.use(Vuex)

store可以分模块管理，下面是我们store总的入口文件：

在入口文件中，引入了多个分模块store。

 以store 用到的user.js为例：

import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'

const user = {
  state: {
    token: getToken(),
    name: '',
    avatar: '',
    roles: [],
    allUserInfo: {},
    userInfo: {},
    loginInfo: {},
    isShow: '0'// 单价金额是否显示 默认0不显示
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    ......
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
	......
    },

    // 获取用户信息
    GetInfo({ commit, state }) {
 	......      
    },

    // 登出
    LogOut({ commit, state }) {
    ...... 
    },

    // 前端 登出
    FedLogOut({ commit }) {
	......
    },
    SetUserInfo({ commit }, userInfo) {
      commit('SET_USERINFO', userInfo)
    },
    SetAllUserInfo({ commit }, userInfo) {
      commit('SET_All_USERINFO', userInfo)
    }
  }
}

export default user

action 中的方法： 

Action 内函数接受一个 context 参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性，但是他们并不是同一个实例。

所以在在action方法中可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

当然，为了代码简化，我们可以使用 ES2015 的 参数解构 来直接展开，便于 commit、state 等多次调用。

例如：

  actions: {
    // 登录
    Login({ commit }, userInfo) {
       .......
    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo(state.token).then(response => {
          const data = response.data
          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
            // 把roles给存储下来了。

            commit('SET_loginInfo', data)
            commit('SET_ROLES', data.roles)
            // var json = data.menutree
            // json.forEach(item => {
            //   delete item.id
            // })
          } else {
            reject('getInfo: roles must be a non-null array !')
          }
          commit('SET_NAME', data.name)
          commit('SET_AVATAR', data.avatar)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
......
}

这里{ commit, state } 就是参数结构，否则,你就得传递参数context, 其写法变为：

  actions: {
    // 登录
    Login(context, userInfo) {
       .......
    },

    // 获取用户信息
    GetInfo(context) {
      return new Promise((resolve, reject) => {
        getInfo(context.state.token).then(response => {
          const data = response.data
          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
            // 把roles给存储下来了。
            //多了context！！！！！！
            context.commit('SET_loginInfo', data)
            context.commit('SET_ROLES', data.roles)
            // var json = data.menutree
            // json.forEach(item => {
            //   delete item.id
            // })
          } else {
            reject('getInfo: roles must be a non-null array !')
          }
          commit('SET_NAME', data.name)
          commit('SET_AVATAR', data.avatar)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
......
}

调用方式：我们在守护路由中调用了store的GetInfo方法： 

        store.dispatch('GetInfo').then(res => { // 拉取用户信息
           .......
        }).catch((err) => {
		   .......
        })

...mapstate

从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态，当状态有n个时候，那你需要写n个计算属性。vuex提供语法糖...mapsate,让你少写几行代码，...在此可以理解为扩展函数吧？。

ps:Vuex教程全集 - 白话篇

如何理解dispatch( 'tagsView/delAllViews',null,{root:true} )里面的root:true