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'])
}