vue篇——vuex

vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
Vuex分为三部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

vuex中，有默认的五种基本的对象：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit(’’,params)。这个和我们组件中的自定义事件类似 。
• actions：异步操作。在组件中使用是$store.dispath(’’)
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

vuex在项目内的使用

我这里使用的vuecli脚手架创建时加入vuex，可以直接在store目录index.js里直接添加代码。
这里我以登录为例，页面获取用户个人信息为例子：

vue2.0里使用，我这里使用了modules对store进行管理

getter代码块

const getters = {
	//例子
	phone: state => state.user.phone,
}
export default getters

store中index代码块

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'//对左侧登录导航栏进行获取
import settings from './modules/settings'//角色权限设置
import user from './modules/user'//用户获取
import getters from './getters'//设置geter
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters
})
export default store

modules模块store管理用户信息实例

import { 接口 } from '位置'//接口获取用户信息
//储存变量
const state = {
  name: '',
  avatar: '',
  isLogin: '',
  email: '',
  phone: '',
  userId: '',
  token: ''//接口获取token
}，
//同步操作
const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
}
//异步操作
const actions = {
	//实例点击登录
	 // user login
	  login({ commit }, userInfo) {
	    const { username, password } = userInfo
	    return new Promise((resolve, reject) => {
	      login({ loginName: username.trim(), password: password }).then(res => {
	        setLoginState('1')
	        commit('SET_NAME', res.data.userName)
	        window.localStorage.setItem('token', res.data.token)
	        resolve()
	      }).catch(error => {
	        reject(error)
	      })
	    })
	  },
	  // user logout
	  logout({ commit, state }) {
	    return new Promise((resolve, reject) => {
	      logout().then(() => {
	        setLoginState('')
	        window.localStorage.setItem('token', '')
	        // resetToken()
	        resolve()
	      }).catch(error => {
	        reject(error)
	      })
	    })
	  },
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

组件内使用

//getters调取方法
this.store.$state.user.phone
//action调取方法重新登录
async logout() {
  await this.$store.dispatch('user/logout')
  this.$router.push('/login')
},

vue3.0里使用，vue3.0这里需要导入createStore进行vuex的操作,同上

import { createStore } from 'vuex'
//创建、获取、移除、清除
export default createStore({
	state: {}，
	getter: {},
	mutations: {},
	actions: {},
	modules:{}
})