VUEX的菜鸡理解

最新推荐文章于 2024-04-19 15:05:39 发布

原创最新推荐文章于 2024-04-19 15:05:39 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍如何使用Vuex进行状态管理，包括安装配置、基本概念如state、getters、mutations及actions的使用，还介绍了如何在组件中访问和修改Vuex中的数据。

VUEX的小白使用

学习中的笔记（希望大佬可以指点出错误，这个只是速成的所以很不全QAQ）。
VUEX就是类似于session，是VUE中存取数据的东西（把东西变为全局的）。就像你登录的时候就可以把你的登录名放到里面去，到了其他页面需要的时候在取出来，同理一些方法也可以。
第一步 使用VUEX需要引入依赖，可以在vue ui（vue3才有）创建项目的时候加上，或者直接npm引入。
第二步 在src文件夹下创建store文件夹，创建index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
      //这个state就是存数据的地方
      state: {
      //   name=null
      },
     //通过这里面的方法来调用state里面的属性。相当于computed
     getters: {
     //   getName(state){  return state.name }
     //   getName: state=>{ return state.name}
     },
    //这个是专门用来修改state的，相当于method
    mutations: {
    // changeName(state,name){ state.name=name }
    //  [CHANGENAME] (state,name) { state.name=name }
    },
    //专门处理异步的（定时器，axios）
    actions: {

    },
    //Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割.这东西存在state中
    modules: {
    //    user
    }
})

关于store/module/user.js

import {getToken,setToken,removeToken} from '@/utils/changeToken';
import {loginAPI} from '@/api/login'
import { reject } from 'core-js/fn/promise';
const user={
    state: {
    token: null,
    Username: null,
    password: null
    },
    mutations: {
        SET_TOKEN: (state,token)=>{
             state.token=token
        },
        SET_USERNAME: (state,Username)=>{
            state.Username=Username
        },
        SET_PASSWORD: (state,password)=>{
            state.password=password
        }
    },
    //加上context不然会出错
    actions: {
        Login(context){
           loginAPI(loginForm).then(res=>{
               //把token保存到sessionStorage
               setToken(res.data.token)
               //把token保存到state中去
              context.commit('SET_TOKEN', res.data.token)

           }).catch(err=>{
               reject(err)
           })
        },
        //加上{{commit}}不然会出错
        Logout({commit}){
            removeToken()
            commit('SET_TOKEN','')
            commit('SET_USERNAME','')
            commit('SET_PASSWORD','')
        },
        getInfor(){
            
        }
    }
}
export default user;

注意不要忘记在main.js中挂载上store/index.js
注意getters不能写异步的方法。
下面是外部使用vuex的使用方法。

## 获得
//直接获得
{{$store.state.name}}
{{$store.getters.getName}}
//获取module里面的
{{$store.state.user.name}}
-------------------------------
{{name}}
computed(){
name(){
// return $store.getters.getName
return $store.state.name
}
}
-------------------------------
//注意引包
import {mapState,mapGetters} from 'vuex'
{{name}}
{{test}}
{{getName}}
computed(){
...mapState(['name','test'])
...mapGetters(['getName'])
//module
...mapState({
'name':'user/name'
})
}
-----------------
##修改
<button @click="$store.commit('changeName','zhangsan')"></button>
<button @click="$store.OneAction()"></button>
---------------------------
<button @click="changeName()"></button>
method(){
...mapMutations(['changeName'])
}