VUEX state 的使用学习二

转载请注明出处：

　　state 提供唯一的数据资源,所有的共享的数据都要统一放到store 中的state中进行存储;

　　状态state用于存储所有组件的数据。

管理数据

// 初始化vuex对象

const store = new vuex.Store({

  state: {

    // 管理数据

    count: 0

  }

})

第一种访问方式

this.$store.state.全局数据名称

　　在组件获取state的数据：原始用法插值表达式

<!--原始用法-->

<div>A组件 state的数据：{{$store.state.count}}</div>

<!--使用计算属性-->

<div>A组件 state的数据：{{count}}</div>

　　使用计算属性：

// 把state中数据，定义在组件内的计算属性中

computed: {

  // 1. 最完整的写法

  // count: function () {

  //   return this.$store.state.count

  // },

  // 2. 缩写

  count () {

    return this.$store.state.count

  }

}

// 不能使用箭头函数  this指向的不是vue实例

　　注意：

　　　　- state中的数据是自定义的，但是state属性名是固定的
　　　　- 获取数据可以通过 $store.state
　　　　- 可以使用计算属性优化模板中获取数据的方式
　　　　- 计算属性不可以使用箭头函数（箭头函数本身是没有this的，实际上用的是父级函数中的this）

第二种方式 mapState:

　　把vuex中的state数据映射到组件的计算属性中。

　　使用方法：

1.从vuex中按需求导入mapState函数

import {mapState} from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

2. 将全局数据，映射为当前组件的计算属性，mapState参数是一个数组

computed :{ ...mapState(['count']) }

　　使用示例：

<a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" />

<script>

import { mapState, mapGetters } from 'vuex'

export default {

  name: 'app',

  data() {

    return {}

  },

  created() {

  },

  computed: {

    ...mapState(['inputValue']),

  },

}

巴特西

VUEX state 的使用学习二

管理数据

第一种访问方式

第二种方式 mapState:

最新文章

热门文章