vuex分模块使用

(此次以设置token为例)

首先在vue项目中npm方式或yarn引入vuex全局状态管理

然后在main.js文件中全局配置

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

然后在src中创建一个store文件中设置一个index.js和一个分包文件夹modules,然后再在分包文件夹中创建被分包的文件,此例是保存token,所以我命名为user.js

index.js代码如下

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)

const store= new Vuex.Store({
    modules: {
        user
    },
})
export default store

分包文件user.js如下

const user={
    state:{
        token:''//相当于页面中的data
    },
    mutations:{
     //mutations方法需要传入两个参数,一个是state另一个是传入的参数(同步)
     SET_TOKEN(state,token){
          state.token=token
     }
    },
    //Action确实和mutation 很类似,不同在于:Action 提交的是mutation，而不是直接变更状态。Action 可以包含任意异步操作
    actions:{
        login ({ commit }, res) {
             commit('SET_TOKEN', res.token)
       }
    }

}

export default user  

然后在页面中直接使用

this.$store.commit("SET_TOKEN", res.token)//将返回的token放到vuex中

查询state

this.$store.state.user.token