三、VueX基本使用操作(使用Composition API)
说明：这里演示使用Composition API来进行store全局变量的取值与修改操作。
xxx.vue：核心，取值与发送修改指令都在setup()中执行。
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <h1>store.name=>{{ name }}</h1> <button @click="handleClick('liner')">修改store.name=>liner</button> </div> </template> <script> // 引入toRefs、useStore函数 import { toRefs } from "vue"; import { useStore } from "vuex"; export default { name: "Home", components: {}, setup() { const store = useStore(); //取到store全局对象 // 1、取全局变量操作 const { name } = toRefs(store.state); // 从store中拿取到state全局对象，并进行解构赋值 // 2、发送指令修改全局变量操作 const handleClick = () => { store.dispatch("change", "liner"); }; return { handleClick, name }; }, }; </script>
index.js
import { createStore } from 'vuex' export default createStore({ state: { name: "changlu" }, mutations: { change(state, str) { state.name = str; } }, actions: { change(store, str) { setTimeout(() => { store.commit("change", str); }, 2000); } }, modules: { } })
四、vue-cli中使用vuex
若是我们想要将一些变量值进行全局管理，此时我们可以使用vuex。
第一步：
npm install vuex --save
第二步：
首先是store/modules.user.js：可以表示单个vuex对象(user)
const user = { state: { // 定义了两个变量 isLogin: false, userId: '123456' }, mutations: { SET_USERID: (state, userId) => { state.token = userId }, SET_ISLOGIN: (state, isLogin) => { state.token = isLogin } }, actions: { // 登录 Login ({ commit }, userInfo) { console.log('userInfo=>', userInfo) return new Promise((resolve, reject) => { loginApi.login(userInfo).then((result) => { console.log('result=>', result) if (result.code === 200) { commit('SET_ISLOGIN', true) // 标识是否登陆成功 commit('SET_USERID', result.result) // 添加用户id } resolve(result) }).catch(error => { reject(error) }) }) } } } export default user
store/getters.js：用于直接快速取到某个vuex对象值
const getters = { userId: state => state.user.userId } export default getters
store/index.js：创建vuex对象，引入vuex对象以及getters
import Vue from 'vue' import Vuex from 'vuex' // 可直接取值 import getters from './getters' // 单个文件引入 import user from './modules/user' Vue.use(Vuex) // 使用vuex插件 const store = new Vuex.Store({ modules: { // 若是有多个vuex对象就统一在这里载入 user }, getters // 这里是载入getters对象 }) export default store
最后当然是将创建好的store对象直接挂载到vue对象上！也就是main.js：
import store from './store' // 引入store对象 new Vue({ el: '#app', router, components: { App }, template: '<App/>', store //这里来插入store对象 })
第三步：定义好vuex对象，那当然是使用了
//取值： //①通过vuex对象来取出属性值(可直接取) this.$store.state.user.userId //取到user对象里的 //②直接通过getters来取出 this.$store.getters.userId //修改值：需要经过action->mutations来进行取值，action统一进行异步操作，mutations来进行同步操作（规范） handleLogin (auto = false) { //登陆调用vuex中方法 this.$store.dispatch('Login', this.loginForm).then((result) => { if (result.code === 200) { if (!auto) { this.$message({ showClose: true, message: '登陆成功！', type: 'success' }) } // 记住我 存储到cookie用户名、密码7天 if (this.remember) { Cookies.set('username', this.loginForm.username, { expires: 7 }) Cookies.set('password', this.loginForm.password, { expires: 7 }) } this.$router.push({ name: 'Commit', params: { userId: result.result } }) } else { this.$message({ showClose: true, message: result.message + ',登陆失败！', type: 'error' }) } }) }
