| Vuex的基本原理与使用 | 您所在的位置：网站首页 › vuex的作用 › Vuex的基本原理与使用 |
Vuex的基本原理与使用
|
VueX的使用学习 参考文章链接1 参考文章链接2 我们需要知道 vue 是单向数据流的方式驱动的 什么是vuex? 为什么要使用vuex ? - 多个视图依赖于同一状态。 - 来自不同视图的行为需要变更同一状态。 vuex 类似Redux 的状态管理器, 用来管理Vue的所有组件状态 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态机就是保存你的状态和状态变化的一个盒子。这里有一些不同种类的状态机，适用于我们这个案例的是有限状态机。像它的名字一样，有限状态机包含有限的几种状态。它接收一个输入并且基于这个输入和当前的状态决定下一个状态，可能会有多种情况输出。当状态机改变了状态，我们就称为它过渡到一个新的状态
具体安装使用 1 下载 2 下载完成之后在src中创建一个 store 文件夹 创建一个store js文件 // store.js import Vue from 'vue' import Vuex from 'vuex' // 让vue使用vuex工具来实现组件之间的数据共享 Vue.use(Vuex) const state = {} const mutations = {} const actions = {} const getters = {} export default new Vuex.Store({ state, getters, actions, mutations })3 在main.js中 引入store.js 然后注入 store
4 定义 / 存储数据的对象，我们可以将你需要存储的数据在这个state中定义 const state = { // 当前登陆的用户名 username: '' } const mutations = { // 提供一个方法，为state中的username赋值 // 这些方法有一个默认的参数，这个参数就是当前store中的State setUserName (state, username) { //存入一个值 state.username = username localStorage.setItem('myname', username) }, getUserName (state) { //输出一个值 return state.username } } //使用的时候---> 通过commit调用mutations中定义的函数，这个函数就是操作state中定义的成员的函数 // this.$store.commit('setUserName', res.data.username(请求返回的值)) const actions = { setUserNameAction: ({commit}, username) => { commit('setUserName', username) }, getUserNameAction: ({commit}) => { commit('getUserName') } } // 通过action来触发mutations中的函数，这种触发方式是异步方式--->使用 //存入 this.$store.dispatch('setUserNameAction', res.data.username + 'aa') //取出 this.currentUserName = this.$store.dispatch('getUserNameAction') //Getters是从 store 中的 state 中派生出一些状态，即当出现多处需要导入某个状态时，结果不是很理想，所以getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 const getters = { getUserName: (state) => { return localStorage.getItem('myname') } } //使用的时候 直接使用 // 你好：{{$store.getters.getUserName}} |
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
【本文地址】
公司简介
联系我们