Vuex常见操作---FAQ

目录

 

如何在Vuex中导入模块

modules--user.js

user模块访问操作（开启作用域）

store导入模块(modules)--user.js

vuex在vue和非vue中如何引用，例如：router中

---

 

如何在Vuex中导入模块

modules--user.js

const user = {
    /**
     * 开启命名空间
     */
    namespaced: true,
    state: {
        token:'',
        userId:'',
        username:'长风破浪',
        /**
         * 登录状态
         */
        loginState:400
      },
      getters: {
        loginState: state => {
              return state.loginState===200?true:false;
          }
      },
    mutations: {
        changeLoginState(state,data){
            console.log(data,'data')
            state.loginState =data.state;
            let user = data.user;
            state.userId = user.userId;
            state.username = user.username;
        }
    },
    actions: {  }
  }
  export default user;

user模块访问操作（开启作用域）

作用域namespaced: true,

state访问：

userId、username：let username =this.$store.state.user.XXX;

getters访问：

loginState：let loginState = this.$store.getters['user/loginState']

mutations访问：

changeLoginState：this.$store.commit('user/changeLoginState',object)

object为数据对象、参数

 

store导入模块(modules)--user.js

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
import user from './user'//-------->导入user模块

const store = new Vuex.Store({
    modules: {
        user//----->引入user模块
    }
  })
  export default store;

vuex在vue和非vue中如何引用，例如：router中

vue

this.$store.xxx

非vue

//1.先导入
import store from '../store/index'
//2.在引用
store.xxx

其他的.vue文件怎么监视state

例如：监视currentIndex的变化，在currentIndex发生变化后作出操作