VUEX 的使用学习二: state

Posted 香吧香

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的主要内容,如果未能解决你的问题,请参考以下文章

vuex学习

Vuex4学习笔记

vuex 学习笔记

Vue学习——Vuex核心概念(StateGetterMutationActionModule)

vuex学习笔记

Vue 之 vuex 解决刷新页面 state 数据丢失的问题,使用vuex-persistedstate进行state持久化