做网站的资源哪里找,兼职招聘网站,网站建设专业英文,国家免费培训学校简单介绍iPhone X 是 iPhone, Vuex 并不是 Vue.我们查看官方文档可以知道#xff1a;Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。怎么理解呢#xff1f;就拿我两位数的资产的银行卡来说吧#xff0c;基本的存钱取钱#xff0c;就是状态管理。怎么用我们将以一个简…简单介绍iPhone X 是 iPhone, Vuex 并不是 Vue.我们查看官方文档可以知道Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。怎么理解呢就拿我两位数的资产的银行卡来说吧基本的存钱取钱就是状态管理。怎么用我们将以一个简单的 Todo 作为例子来讲解 Vuex 的基本使用。安装npm install vuex --save初始化首先需要在项目的 src 目录下新建一个 Vuex 的目录 store结构如下 初始化 Vuex// index.js
import Vue from vue
import Vuex from vuex
import state from ./state.jsVue.use(Vuex)export default new Vuex.Store({state
})
引入 Vuex 是理所当然的除此之外执行 Vue.use(Vuex) 来全局安装 Vuex. Vuex.Store 即 Vuex 的构造函数来初始化 Vuex 实例。这里可以看到我们在 Vuex 构造函数中传入了一个 state 选项那这个 state 是什么呢StateState 从字面意思理解就是状态在 Vuex 里面什么代表了状态呢数据。State 是 Vuex 这一状态管理工具的唯一的数据源所有的数据都储存在里面。 State 的写法如下// state.js
const state {todoList: JSON.parse(localStorage.getItem(todoList)) || []
}export default state
这里声明了一个 state, 里面有一个 todoList 的字段todoList 的数据是去 localStorage 里面拿的如果没有就是一个空数组。 好了现在我们的状态已经有了接下来就是要在组件里面获取这个 state, 也就是让我们的组件拿到这里的数据。GetterGetter, 顾名思义就是一个“取”的操作来拿 state 里面的数据。Getter 的写法如下:// getters.js
export const todoList state state.todoList
这里声明并输出了一个 todoList 函数函数的参数是 state, 返回值 state.todoList. Getter 函数接受 state 作为它的第一个参数。这里我们就取到了上一节 state 里面的 todoList. 在需要 todoList 数据的组件当中可以利用 mapGetters 将数据映射到计算属性。写法如下import { mapGetters } from vuex...export default {...computed: {...mapGetters([todoList])}...
}
调用的时候和普通的计算属性别无二致:ul classtodo-listli v-for(item, index) in todoList :keyindex classtodo-item .../li
/ul这样todoList 就被渲染到了页面中 当然不管是标记一个事项为完成还是添加删除事项todoList 都会产生变化也就是 state 会变化。那我们怎么去改变 state 呢这就需要 mutation 的帮助 。MutationMutation 是 Vuex 当中改变 state 唯一的方法。Mutation 使用与事件处理函数非常相似都具有类型和回调函数。 这里把 mutation 比作事件首先来规定“事件类型”// mutation-types.js
export const SET_TODO_LIST SET_TODO_LIST
这里规定了一个 SET_TODO_LIST 的类型。 类型是不可变的所以我们将其声明为常量。 然后再来写“事件”的“回调”// mutations.js
import * as types from ./mutation-typesconst mutations {[types.SET_TODO_LIST] (state, todoList) {state.todoList todoList}
}
export default mutations
可以看到 mutations 是一个对象一个“事件类型”就对应可一个处理函数。处理函数接受 state 作为它的第一个参数第二个参数是额外的一般称之为“荷载 (payload) ”。 这里我们的荷载是一个 todoList这个处理函数将 state 原来的 todoList 改为传入的荷载。 要使用 mutations在 Vuex 的构造函数中就要将 mutations 选项加进去import Vue from vue
import Vuex from vuex
import state from ./state.js
import * as getters from ./getters
import mutations from ./mutations
import createLogger from vuex/dist/loggerVue.use(Vuex)const debug process.env.NODE_ENV ! productionexport default new Vuex.Store({state,getters,mutations,plugins: debug ? [createLogger()] : []
})
现在构造函数中已经传入了 mutations接下来就是在组件中使用 mutations这里的第四个选项 plugins 并不影响 mutation 的功能用途是在控制台打印 Vuex 操作的信息.TodoList 组件中我们在“添加事项”这一动作提交 mutation, 改变 state. 组件内的代码如下// todo-list.vueimport { mapGetters, mapMutations } from vuexexport default {...methods: {...addItem () {let itemText window.prompt(请输入要添加的事项)if (itemText) {let list this.todoList.slice();list.push({text: itemText,done: false,checked: false})this.setTodoList(list)}}......mapMutations({setTodoList: SET_TODO_LIST})}}
接下来就去 todo 里面添加一个条目。如图添加了一个 coding 事项 可在 vue 的 devtool 观察到如下结果 可以看到 mutation 的 payload 以及 type 信息。 再来观察 Vuex 的 createLogger 插件在控制台输出的信息 可以看到这里进行了一次 SET_TODO_LIST 的 mutation 操作。从 prev state可以知道 操作前 todoList 只有三个条目。进行 SET_TODO_LIST 操作时传入的荷载为四个条目的 todoList。操作后观察 next state 可知操作后的 todoList 已经有四个事项。 在线上的 Demo 中可打开控制台添加或者删除条目观察 Vuex 的状态变化。总结这里用一个 todo 的例子简单介绍了 Vuex 基本的 getters 和 mutatiosn 操作更多的细节可参考官方文档 。 Vuex 的应用场景是当 n 多个组件之间的相互通信让人眼花缭乱那么借助 Vuex 保存多个组件共享的状态只需操作 state就能在组件之间同步状态。
