vue中使用vuex（新增，修改，获取，应用）

先引入：npm install vuex --save

 

1. vue 项目中 src 底下创建一个 store 文件夹 => 创建一个 index.js 和 一个 gttters.js 文件

2.sotre 文件夹底下创建一个 modules 文件夹 => 创建 user.js 和 setting.js 文件

如下图所示：

 

 

index.js 文件夹内容：

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import settings from './modules/settings'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({ //这里 store 的应用对应着文件夹中的顺序。 例如：getters 是直接放在 store 文件夹底下的。 user 和 settings 是放在 modules 文件夹底下的
  modules: {
    user,
    settings
  },
  getters
})

export default store

　　

　　

getters.js 文件内容：

const getters = { //这里只缓存个人信息和 token 做例子使用。例子： 参数名称 ： state => state. store文件夹底下的 modules 文件夹底下的 JS子文件的名称 . 参数名字。 例如： state => state 点 store 文件夹底下的 modules 文件夹底下的 user.js 文件 定义的实例 点 
参数名字 =》 token 和 userInfo   
  token: state => state.user.token,
  userInfo : state => state.user.userInfo,
}
export default getters

　　

store文件夹底下的 modules 文件夹底下的 user.js 文件内容：

import {  getInfo} from '@/api/login' // 这里引入的方法只作为展示使用，不作为实际使用
import { getToken } from '@/utils/auth'

const user = {
    state: {
        token: getToken(),
        userInfo :{},
    },

    mutations: { // 这里设置方法名字要和下面接收的方法名字相对应
        SET_TOKEN: (state, token) => {
            state.token = token
        },

        SET_USERINFO: (state, user)=>{
            state.userInfo = user
        },

   
    },

    actions: {

        // 获取用户信息
        GetInfo({ commit, state }) {
            return new Promise((resolve, reject) => {
                getInfo(state.token).then(res => { //这里的 getInfo 要和上面引入的方法名字相同，自行引入，传参要和你 api 设置的接收参数一样
                    const user = res.user
                    commit('SET_USERINFO',res.user) // 这里 commit 设置的属性要和上面的 mutations 里面设置的方法名字相对应
                    resolve(res)
                }).catch(error => {
                    reject(error)
                })
            })
        },



    }
}

export default user

　　

store文件夹底下的 modules 文件夹底下的 settings.js 文件内容：

// 这个文件夹创建实例和参数接收值
const mutations = { 
  CHANGE_SETTING: (state, { key, value }) => {
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  mutations,
  actions
}

　　

mian.js 文件中挂载

import store from './store' //引入 store 文件夹
import router from './router' //本地路由懒加载

new Vue({ //最后导出即可
    el: '#app',
    router,
    store,
    render: h => h(App)
})

　　

备注：书写顺序： store=> modules=>user,js 写方法和调用东西，getters.js 应用， 最后是找个全局的地方调用即可。 

 

// 前提是 需要引入 store ，例如：

import store from "./store";

方法调用：由于在 modules 底下创建了新方法，所以需要在某个地方去调用。这里建议放在登录拦截之后。比如说：和 main.js 同级的 permission.js 文件

store .dispatch("GetInfo")

　　可以在后面街上 then 去做其他操作，也可以不接上。PS：原因在于说调用了方法已经把数据储存在vuex了，所以可以不用管。

 

应用： 由于 store 挂载在 main.js 文件了，所以不需要每一个地方都去引用 store 文件，只需要直接使用。

this.$store.getters.userInfo //可以直接获取到数据，可以通过 .vue 文件在 created 里面直接输出 this.$store.getters 来查看是否有值或者数据，如果没有可以看看 moudules 文件夹中的 user.js 有没有在 实例 state 里面设置参数值，再看看下面 mutations 里面有没有设置
方法来接收值，最后再看看 actions 里面有没有用 commit 去修改 state 里面的值，看看 commit 设置的方法 是否和上面的 mutations 设置的方法名字相同，后端是否返回。 到了这一步数据问题基本上都能定位出来是哪里的出现的错误了

　　

修改： 由于store 挂载在 main.js 文件中，所以不需要每个地方都去引用 store 文件，直接使用即可

store.commit(" 对应着 modules 文件夹中的 底下 js 文件中的方法名字 ", 要修改的值);

例如：

store.commit('SET_USERINFO',res.user); // 备注： 
这里的 SET_USERINFO 对应着我 store 文件夹底下的 modules 文件夹 底下的 user.js 的 SET_USERINFO 方法。

这里的 res.user 对应着接口返回的值，自行修改