Vuex的详细解读之手把手教学篇

Posted 勇敢小陈

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuex的详细解读之手把手教学篇相关的知识，希望对你有一定的参考价值。

六、Action属性的用法

1.Action说明

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作
  • Action 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。所以可以通过.then去接收处理返回的结果。

2.声明方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//单一数据数，一个对象包含了全部的应用层级状态。
export default new Vuex.Store(
  //全局状态的数据源，相当于data。
  state: 
    num: 0,
    list: [
      
        name: '张三',
        id: 1,
        type: 1
      ,
      
        name: '李四',
        id: 2,
        type: 2
      ,
    ]
  ,
  // 在 store 中的 state 中派生出状态，相当于store的计算属性。
  getters: 
    //接收两个参数，第一个参数接收state，也可以接收其他的getters作为参数。
    doneNum(state) 
      return state.num + 10
    ,
    doneList(state, getters) 
      return state.list.find(item => item.type === 1).name + getters.doneNum
    ,
    //也可以返回一个函数用于数据的查询等操作
    getData: (state) => (id) => 
      return state.list.find(item => item.id === id)
    
  ,
  //更改Vuex的store中状态的唯一方法就是提交mutations。
  // 可接收多个参数，第一个参数为state。
  //可以理解为在mutations我们可以声明多个用于更改state的方法并在需要的时候，通过commit方法去触发对应的方法从而更改store里面的状态。
  mutations: 
    changNum(state, data) 
      state.num += data.price
    
  ,
  actions: 
    //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
    //因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
    changNum( commit, state, getters , data) 
      commit('changNum', data)
    
  ,
  modules: 
  
)

3.触发actions方法

<template>
  <div>
    <h1> num </h1>
    <button @click="add( price: 2 )">点我触发mutation更改store的状态</button>
    <button @click="changNum">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import  mapState, mapGetters, mapMutations  from "vuex";
export default 
  computed: 
    ...mapState(["num"]),
    ...mapGetters(
      doneName: "doneList",
    ),
  ,
  data() 
    return 
      name: "小陈",
    ;
  ,
  methods: 
    ...mapMutations(
      add: "changNum",
    ),
    //写法1：
    //直接通过$store.dispatch触发
    // changNum()
    //   this.$store.dispatch('changNum', price: 2)
    // 
    // 写法二：通过type属性指定提交
    //需要注意的是这样触发actions方法时，整个对象会作为第二个参数传递到actions的方法中
    changNum() 
      this.$store.dispatch(
        type: "changNum",
        price: 2,
      );
    ,
    
  ,
  created() 
    console.log(this.$store.state.num);
  ,
;
</script>

<style>
</style>

4.通过mapActions辅助函数优化Actions内方法的触发

<template>
  <div>
    <h1> num </h1>
    <button @click="add( price: 2 )">点我触发mutation更改store的状态</button>
    <button @click="add( price: 2 )">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import  mapState, mapGetters, mapMutations , mapActions from "vuex";
export default 
  computed: 
    ...mapState(["num"]),
    ...mapGetters(
      doneName: "doneList",
    ),
  ,
  data() 
    return 
      name: "小陈",
    ;
  ,
  methods: 
    ...mapMutations(
      add: "changNum",
    ),
    //写法1：
    //直接通过$store.dispatch触发
    // changNum()
    //   this.$store.dispatch('changNum', price: 2)
    // 
    // 写法二：通过type属性指定提交
    //需要注意的是这样触发actions方法时，整个对象会作为第二个参数传递到actions的方法中
    // changNum() 
    //   this.$store.dispatch(
    //     type: "changNum",
    //     price: 2,
    //   );
    // ,



    //通过展开运算符将mapActions混入到外部对象中
    //传递参数的话，可以在触发时直接传递
    // ...mapActions(['changNum']),
    //当需要重新命名时
    ...mapActions(
      add:'changNum'
    ),
  ,
  created() 
    console.log(this.$store.state.num);
  ,
;
</script>

<style>
</style>

七、Module模块化属性说明

1.Module属性介绍

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

2.对原有文件进行拆分实现模块化

在实际项目开发中可能存在多个功能模块，为了项目的模块化需要对项目的目录结构以及命名进行对应的处理，使我们的项目更易维护。

例如我们上面的讲解主要通过更改num来进行验证的，所以我们可以将其拿出来生成一个单独的文件。

下面开始实现，新建store_module文件夹进行各模块vuex相关方法数据的存放，在index文件中进行引入。

目录结构：

num.js

export default  
	//全局状态的数据源，相当于data。
	state: 
		num: 0,
		list: [
			
				name: '张三',
				id: 1,
				type: 1
			,
			
				name: '李四',
				id: 2,
				type: 2
			,
		]
	,
	// 在 store 中的 state 中派生出状态，相当于store的计算属性。
	getters: 
		//接收两个参数，第一个参数接收state，也可以接收其他的getters作为参数。
		doneNum(state) 
			return state.num + 10
		,
		doneList(state, getters) 
			return state.list.find(item => item.type === 1).name + getters.doneNum
		,
		//也可以返回一个函数用于数据的查询等操作
		getData: (state) => (id) => 
			return state.list.find(item => item.id === id)
		
	,
	//更改Vuex的store中状态的唯一方法就是提交mutations。
	// 可接收多个参数，第一个参数为state。
	//可以理解为在mutations我们可以声明多个用于更改state的方法并在需要的时候，通过commit方法去触发对应的方法从而更改store里面的状态。
	mutations: 
		changNum(state, data) 
			state.num += data.price
		
	,
	actions: 
		//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
		//因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
		changNum( commit, state, getters , data) 
			commit('changNum', data)
		
	,
	modules:

 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import num from './store_module/num'

Vue.use(Vuex)

//单一数据数，一个对象包含了全部的应用层级状态。
export default new Vuex.Store(
  state: 
  ,
  getters: 
  ,
  mutations: 
  ,
  actions: 
  ,
  modules: 
    num
  
)

对应的取值就变成了

<h1> num.num </h1>

对应的其他的（action ，mutation ，getters ）不用进行更改，这是对于状态进行了模块的区分。

对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

3.通过命名空间进行进一步的封装处理

1.为什么要开始命名空间

在上述情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。Getter 同样也默认注册在全局命名空间，但是目前这并非出于功能上的目的（仅仅是维持现状来避免非兼容性变更）。必须注意，不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

2.命名空间的说明

通过namespaced: true,属性开启命名空间

export default  
	namespaced: true,
	//全局状态的数据源，相当于data。
	state: 
		num: 0,
		list: [
			
				name: '张三',
				id: 1,
				type: 1
			,
			
				name: '李四',
				id: 2,
				type: 2
			,
		]
	,
	// 在 store 中的 state 中派生出状态，相当于store的计算属性。
	getters: 
		//接收两个参数，第一个参数接收state，也可以接收其他的getters作为参数。
		doneNum(state) 
			return state.num + 10
		,
		doneList(state, getters) 
			return state.list.find(item => item.type === 1).name + getters.doneNum
		,
		//也可以返回一个函数用于数据的查询等操作
		getData: (state) => (id) => 
			return state.list.find(item => item.id === id)
		
	,
	//更改Vuex的store中状态的唯一方法就是提交mutations。
	// 可接收多个参数，第一个参数为state。
	//可以理解为在mutations我们可以声明多个用于更改state的方法并在需要的时候，通过commit方法去触发对应的方法从而更改store里面的状态。
	mutations: 
		changNum(state, data) 
			state.num += data.price
		
	,
	actions: 
		//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
		//因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
		changNum( commit, state, getters , data) 
			commit('changNum', data)
		
	,
	modules:

3.在带命名空间的模块内访问全局内容

如果你希望使用全局 state 和 getter，rootState 和 rootGetters 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

若需要在全局命名空间内分发 action 或提交 mutation，将  root: true  作为第三参数传给 dispatch 或 commit 即可。

modules: 
  foo: 
    namespaced: true,

    getters: 
      // 在这个模块的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) 
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
        rootGetters['bar/someOtherGetter'] // -> 'bar/someOtherGetter'
      ,
      someOtherGetter: state =>  ... 
    ,

    actions: 
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ( dispatch, commit, getters, rootGetters ) 
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'
        rootGetters['bar/someGetter'] // -> 'bar/someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null,  root: true ) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null,  root: true ) // -> 'someMutation'
      ,
      someOtherAction (ctx, payload)  ...

4.在带命名空间的模块注册全局 action

若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中。


  actions: 
    someOtherAction (dispatch) 
      dispatch('someAction')
    
  ,
  modules: 
    foo: 
      namespaced: true,

      actions: 
        someAction: 
          root: true,
          handler (namespacedContext, payload)  ...  // -> 'someAction'

5.开启命名空间后的数据取值以及方法触发

未开启命名空间前的取值以及方法

<template>
  <div>
    <h1> num.num </h1>
    <div> doneName </div>
    <button @click="add( price: 2 )">点我触发mutation更改store的状态</button>
    <button @click="add( price: 2 )">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import  mapState, mapGetters, mapMutations , mapActions from "vuex";
export default 
  computed: 
    ...mapState(["num"]),
    ...mapGetters(
      doneName: "doneList",
    ),
  ,
  data() 
    return 
      name: "小陈",
    ;
  ,
  methods: 
    ...mapMutations(
      add: "changNum",
    ),
    ...mapActions(
      add:'changNum'
    ),
  ,
  created() 
  ,
;
</script>

<style>
</style>

开始命名空间后的取值以及方法

<template>
  <div>
    <h1> num </h1>
    <div> doneName </div>
    <button @click="add( price: 2 )">点我触发mutation更改store的状态</button>
    <button @click="add( price: 2 )">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import  mapState, mapGetters, mapMutations , mapActions from "vuex";
export default 
  computed: 
    ...mapState(
      num:state=>state.num.num
    ),
    ...mapGetters(
      doneName: "num/doneList",
    ),
  ,
  data() 
    return 
      name: "小陈",
    ;
  ,
  methods: 
    ...mapMutations(
      add: "num/changNum",
    ),
    ...mapActions(
      add:'num/changNum'
    ),
  ,
  created() 
  ,
;
</script>

<style>
</style>

对于上述来说，可能引入多个的话，会出现重复的引入路径，导致代码臃肿，所以可以进行简化，简化后的代码。

<template>
  <div>
    <h1> num </h1>
    <div> doneName </div>
    <button @click="add( price: 2 )">点我触发mutation更改store的状态</button>
    <button @click="add( price: 2 )">点我触发actions更改store的状态</button>
  </div>
</template>

<script>
import  mapState, mapGetters, mapMutations , mapActions from "vuex";
export default 
  computed: 
    ...mapState('num',
      num:state=>state.num
    ),
    ...mapGetters('num',
      doneName: "doneList",
    ),
  ,
  data() 
    return 
      name: "小陈",
    ;
  ,
  methods: 
    ...mapMutations('num',
      add: "changNum",
    ),
    ...mapActions('num',
      add:'changNum'
    ),
  ,
  created() 
  ,
;
</script>

<style>
</style>

手把手教学之vue-cli快速搭建脚手架

1.自定义特征

技术分享图片

2.babel,router,vuex,css预处理器的选择

技术分享图片

3.使用history模式进行路由选择

技术分享图片

4.选择css预处理器(这里我们选择stylus)

技术分享图片

5.建立配置文件

技术分享图片

6.选择是否保存这个项目的预设

技术分享图片

7.安装包依赖,出现下图则表示安装成功

技术分享图片

8.命令行运行项目,出现下图则表示运行成功

技术分享图片

9.打开浏览器,出现下图则表示浏览器运行成功(怎么样,是不是很happy那读到这里)

技术分享图片

 

以上是关于Vuex的详细解读之手把手教学篇的主要内容，如果未能解决你的问题，请参考以下文章

手把手教学~基于element封装tree树状下拉框

超详细！Vuex手把手教程

单元测试界的高富帅，Pytest框架，手把手教学，从入门到精通

单元测试界的高富帅，Pytest框架，手把手教学，从入门到精通

python必备库-画图神器Matplotlib手把手教学

Ubuntu零基础教学-GParted磁盘分区工具使用|超级详细，手把手教学