详解vuex的简单使用
1 目录的配置
创新互联主营抚宁网站建设的网络公司,主营网站建设方案,重庆APP开发公司,抚宁h5微信小程序开发搭建,抚宁网站营销推广欢迎抚宁等地区企业咨询
根据官方推荐在src目录里面创建store目录
2 创建store里面的文件
根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js
2.1 state.js
state.js: 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。(用来管理所有vuex状态数据)
/* * 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态 * 单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。(用来管理所有vuex状态数据) * */ const state = { // 城市状态,用来管理城市 city: {}, cityList: [], fullScreen: true, palyer: false }; export default state;
2.2 mutations-types.js 存取mutations相关的字符常量 (一些常量)
/* * 存取mutations相关的字符常量 * */ // 定义常量并导出 export const SET_CITY = 'SET_CITY'; export const SET_PLAY = 'SET_PLAY'; export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'; export const SET_CITY_LIST = 'SET_CITY_LIST';
2.3 mutations.js (定义修改的操作)
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
/* * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation * Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数 */ // 导入mutation-type.js里面所有的常量 import * as types from './mutation-types'; // 定义一个mutation可以供设置和修改值 const mutations = { /* * 1 表达式作为属性表达式放在方括号之内 * 2 形参state (获取当前状态树的state) * 3 形参city,是提交mutation时传的参数 * 4 使用mutation便于书写方便 * 5 这个操作相当于往state.js里面写入city */ [types.SET_CITY](state, city) { state.city = city; }, [types.SET_CITY_LIST](state, list) { state.cityList = list; }, [types.SET_FULL_SCREEN](state, flag) { state.fullScreen = flag; }, [types.SET_PLAY](state, palyState) { state.palyer = palyState; } }; // 导出mutation export default mutations;
2.4 getters.js 有时候我们需要从 store 中的 state 中派生出一些状态。
mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性
/* * 有时候我们需要从 store 中的 state 中派生出一些状态 * 这里的常量主要是对state里面做一些映射 * mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性 */ // 对state里面的属性做一些映射 export const city = state => state.city; // 箭头函数的简写 export const cityList = state => state.cityList; export const fullScreen = state => state.fullScreen; export const palyer = state => state.palyer;
2.5 actions.js
Action 类似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
- 在一个动作中多次改变mutation可以封装一个action
/* * actions类似mutation * 区别: * 1:action提交的是mutation * 2:action可以包含任意异步操作 */ /* * 使用: * 1:在一个动作中多次改变mutation可以封装一个action */ import * as types from './mutation-types'; export const selectList = function ({commit, state}, {list, index}) { commit(types.SET_CITY_LIST, list); commit(types.SET_PLAY, false); commit(types.SET_FULL_SCREEN, true); };
2.6 index.js入口
/* * 入口 */ import Vue from 'vue'; import Vuex from 'vuex'; // import * as obj from 'xxxx'; 会将xxxx中所有export导出的内容组合成一个对象返回。 import * as actions from './actions'; // 拿到getters里面的映射 import * as getters from './getter'; import state from './state'; import mutations from './mutations'; import createdLogger from 'vuex/dist/logger'; Vue.use(Vuex); const debug = process.env.NODE_ENV != 'production'; export default new Vuex.Store({ actions, getters, state, mutations, strict: debug, plugins: debug ? [createdLogger()] : [] });
3 使用
3.1 在mian.js注册store
在main.js里面new的Vue的实例里面注册store
3.2 写入值,要在组件中引入mapMutations的语法糖
引入语法糖
import {mapMutations, mapActions} from 'vuex';
在methods里面mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
...mapMutations({ // 这里和mutation里面的常量做一个映射 setCity: 'SET_CITY' })
在需要的地方写入值
this.setCity(city);
3.3获取值
获得vuex中的值,要在组件中引入mapGetters(mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性)
引入mapGetters
import {mapGetters} from 'vuex';
在computed计算属性里面使用对象展开运算符将 getters 混入 computed 对象中
computed: { // 这里面的city映射的是state.js里面的city // 可以映射多个值 ...mapGetters([ 'city', 'cityList', 'palyer', 'fullScreen' ]) }
拿到值
created() { console.log(this.city); console.log(this.cityList[1]); console.log(this.palyer); console.log(this.fullScreen); }
3.4 action存入值
...mapActions(['selectList'])
在需要存入的地方使用
this.selectList({ list: this.citys, index: 1 });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
名称栏目:详解vuex的简单使用
当前地址:http://myzitong.com/article/pedges.html