Vuex常见操作---FAQ

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_23876873/article/details/84329593

目录

 

如何在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

猜你喜欢

转载自blog.csdn.net/qq_23876873/article/details/84329593
今日推荐