简单聊一下Vuex的基本使用(快速入门) - 网站源码_资源分享

甚么是Vuex ?

Vuex是专门针对为Vue.js应用领域合作开发的状况区域化,选用封闭式储存大部份模块的状况,让模块间能通讯

选人话说是: vuex是专门针对用以管理工作vue的统计数据的,标准化在两个文档中储存公用的统计数据

Vuex个5个文本须要自学:

state — 储存公用的统计数据mutations — 修正统计数据getters — 类似于与computed(排序特性),用作排序统计数据后获得捷伊统计数据actions —

选用关键步骤:

浏览vuex (npm i vuex)在src产品目录下建立两个配置文档标准化取名 store ,在store中建立index.js增建的index.js如下表所示标识符:

import Vue from vue import vuex from vuex Vue.use(vuex) export default new vuex.Store({ state: {}, mutations: {}, getters: {}, actions: {}, modules: {} })

特别注意: 雷西县向Vue示例中转化成store

import store from ./store new Vue({ store, render: h => h(App), }).$mount(#app)

. state

state近似于模块中的data(){return{}} 用以存放统计数据

示例:

export default new vuex.Store({ // 全自动表述许多统计数据 state:{ a: 10 } })

<template> <div> {{$store.state.a}} // 网页中列印出10 </div> </template>

2. mutations

mutations主要用作修正state中的统计数据

参数一: state对应 state对象

参数二: 形参- 须要传入的参数,可有可无

语法: mutations:{‘mutations名’:funtion(state,形参) }

例子: 在state中a = 10 , 我们表述两个mutations方法对state中的a的值进行修正

标识符如下表所示:

export default new vuex.Store({ state: { a: 10 }, mutations: { state.a += 1 // a+1 }, })

接下来在App.vue中我们写两个button按钮用以点击并调用这个方法点一次触发一次让a的值每次加一

<template> <div> {{$store.state.a}} // 点击一次就调用一次进行+1 <button @click=”$store.commit(add)”>a+1</button> </div> </template>

注:

在模板中: $store.commit(‘mutations名’)

在模块中: 要加this调用, this.$store.commit(‘mutations名’)

3. getters

语法: getters:{ ‘getters名’,function(state,形参)},用法和mutations差不多,

getters的作用是用作排序统计数据获得排序后的捷伊数据近似于computed排序统计数据

示例: 例如在state两个值为b:[1,2,3,4,5],

用getters对这个统计数据进行排序然后列印到网页中,具体标识符如下表所示:

getters: { sum: function (state) { return state.b.reduce((temp, item) => temp + item, 0) } }

在网页中渲染出来{{$store.getters.sum}} // 15

4. actions

语法: actions:{ ‘action名’,function(context,形参)}

context其实是对应的state .

继续看示例标识符:

// state:{ book:[ ] }, mutations:{ updateBook:function(state,newbook){ state.book = newbook } } actions: { getBooks: function (context) { axios({ url: https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books, method: get }).then(res => { console.log(res); context.commit(updateBook, res.data.data) }) } }

接着模块中写两个bu

调用actions的方式:

模块中: $store.dispatch(‘actions名’)

模块中: this.store.dispatch(‘actions名’)

<template> <div> // 点击触发actions 并发起axios请求统计数据 <butt </div> </template>

modules

modules默认namespaced: 为false ,设置true后.,在模块中选用拆分到modules的统计数据和方法要加”模块名”

语法: modules:{ ‘模块名’:{state{},mutations:{},getters:{},actions:{} }}

modules用以拆分index.js中的标识符, 减少index.js中标识符的繁多和体积,让index.js中更简洁,把相同的须要的统计数据和方法都提取到同两个js中

示例: 这里我就随便的写几个进行拆分提取

前提: 在store文档中增建modules文档,把state中book数组和mutations中修正book的方法

import axios from axios export default { state: { b: [1, 2, 3, 4, 5], book: [] }, mutations: { updateBook: function (state, newbook) { state.book = newbook } }, getters: { sum: function (state) { return state.b.reduce((temp, item) => temp + item, 0) } }, actions: { getBooks: function (context) { axios({ url: https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books, method: get }).then(res => { console.log(res); context.commit(updateBook, res.data.data) }) } } }

抽离到allBook.js中后,在index.js中引入,并添加到modules对象中

import Vue from vue import vuex from vuex import allBook from ./modules/allBook.js Vue.use(vuex) export default new vuex.Store({ modules: { allBook } })

特别注意: 抽离后.模块中调用的方式就变了, 还记得我们加了namespaced: true这句话, 加了之后,引用统计数据和方法时都必须要加上模块名了

示例: 如何调用

以及其他三个调用方式:

// 例子: 1. // 原先写法: {{$store.getters.sum}} // 15 2. // 抽离后的写法: {{$store.gerters[allBook/sum]}} // 15 // 这里我都列举呵呵其他三种的方式 // state: $store.state.模块名.特性名 // mutations: $store.commit(模块名/mutation名) // getters: $store.gerters[模块名/getter名] // actions: $store.dispatch(模块名/action名)

补充: 如果要修正state/mutations/getters/actions名字,例如:能这样写 $store.commit(‘模块名,{新名字,久名字}’) ,其他的格式都类似于如此

Vuex的辅助函数map系列用法汇总

mapState/mapMutations/mapGetters/mapActions

用以优化访问的方式, 普通的写法太麻烦了,利用vuex内置的方法,能简洁的引用vuex中的统计数据和方法

1. mapState函数

将state中的变量映射到当前模块中选用

选用关键步骤,标识符如下表所示:

// 当前模块中按需引入mapState // 例如引用vuex中state中的变量 c:30 <template> {{c}} // 30 </template> <script> import { mapState } from vuex export default { computed: { …mapState([c]) // 如果须要改名字的话 …mapState({新名字:旧名字}) } } </script>

computed:{ …mapState() } 这里的…是对象的展开运算符，整体来看是对象的合并。

2. mapMutations

不多bb ,上标识符自行体会:

// 在state中表述两个变量为a:10 // App.vue模块中 <template> <div> {{a}} <button @click=”abb”>点击+1</button> </div> </template> <script> import { mapMutations, mapState } from vuex export default { computed: { …mapState([a]) }, methods: { …mapMutations([add]) }, } </script> // index.js中 export default new vuex.Store({ state: { a: 10, }, mutations: { add: function (state) { state.a += 1 } }, })

以上列举了mapState和mapMutations的语法,其他两个(mapGetters和mapActions)用法和前两个都是一样的,自行体会吧,脖子酸了,休息会,不写了

接下来讲呵呵在全局中和modules情况下选用map系列的用法:

如何选用全局state

直接选用： this.$store.state.xxx;

map辅助函数：

computed: { …mapState([xxx]), …mapState({新名字: xxx}) }