vuex 状态管理模式 | 解决组件之间数据共享的问题
2018年11月15日1.安装
|
1 2 |
npm install vuex --save #使用npm安装 yarn add vuex --save #使用yarn安装 |
2.开始配置
创建src/store/index.js 文件,开始编辑
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import Vue from 'vue' import Vuex from 'vuex' //引入vuex组件状态管理 import ls from '../utils/localStorage' //引入本地存储组件 import router from '../router' //引入路由 Vue.use(Vuex) const state = { user: ls.getItem('user'), //用户信息，初始值从本地 localStorage 获取 auth: ls.getItem('auth') //添加 auth 来保存当前用户的登录状态 } const mutations = { /** * 创建用户的方法 * @param state * @param user * @constructor */ UPDATE_USER(state, user) { state.user = user //改变 user 的值 ls.setItem('user', user) //将改变后的值存入 localStorage }, /** * 填写登陆状态的方法 * @param state * @param auth * @constructor */ UPDATE_AUTH(state, auth) { //添加 UPDATE_AUTH 来更改当前用户的登录状态 state.auth = auth ls.setItem('auth', auth) } } const actions = { login({commit}, user) { if (user) { commit('UPDATE_USER', user) //更新用户信息 commit('UPDATE_AUTH', true) //将状态改为已经登陆 } router.push('/') //跳转到首页 } } const store = new Vuex.Store({ state, mutations, actions }) export default store |
3.全局注册
打开src/main.js文件,开始编辑
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
. . . import store from './store' //引入存储组件 . . . /* eslint-disable no-new */ new Vue({ el: '#app', store, //注册存储组件 components: { App }, template: '<App/>' }) |
4 使用
1.方法一
|
1 2 |
const localUser = this.$store.state.user //获取里面的数据 this.$store.dispatch('login', user) //分发登陆事件 |
2.方法二
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { mapState } from 'vuex' export default { name: 'TheEntry', computed: { //计算属性有缓存 ...mapState([ //使用对象展开运算符，将 mapState 对象混入到计算属性之中 'auth', //映射 this.auth 为 store.state.auth 'user' //映射 this.user 为 store.state.user ]) } } |
