通过辅助函数 - mapState获取 state中的数据

mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法

1、第一步：在导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2、第二步：采用数组形式引入state属性

mapState(['count'])

3、第三步：利用展开运算符将导出的状态映射给计算属性

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


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

Vuex的单项数据流

我们如果想要修改组件仓库的数据，组件中不能直接修改仓库的数据

所以我们要用到mutations来修改state 数据

state数据的修改只能通过mutations，并且mutations必须是同步的

1、定义mutations 在vuex仓库index中定义mutations

const store  = new Vuex.Store({
 state: {
   count: 0
},
 // 定义mutations
 mutations: {
  }
})

2、格式说明 mutations里面放的的第一个参数必须是state

mutations是一个对象，对象中存放修改state的方法

mutations: {<br>   // 方法里参数 第一个参数是当前store的state属性<br>   // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷<br>   addCount (state) {<br>     state.count += 1<br>  }<br>},

3.组件中提交 mutations 在组件中的方法中提交commit，即可提交到mutations中

this.$store.commit('addCount')

参数传递

mutations中的方法，是可以带参数传递的

mutations: {
  ...
  addCount (state, count) {
    state.count = count
  }
},

页面中提交调用 mutation：

handle ( ) {
  this.$store.commit('addCount', 10)
}

将参数10传递到道路mutations中的count的位置。

Vuex中的值和组件中的input双向绑定

给输入框添加了:value 和 @input 使他实时监听内容，然后将内容封装传参给了mutations

<input :value="count" @input="handleInput" type="text">

export default {
  methods: {
    handleInput (e) {
      // 1. 实时获取输入框的值
      const num = +e.target.value
      // 2. 提交mutation，调用mutation函数
      this.$store.commit('changeCount', num)
    }
  }
}

mutations: { 
   changeCount (state, newCount) {
      state.count = newCount
   }
},

辅助函数 mapMutations

mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法

1.第一步：导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2.第二步：采用数组形式引入state属性

mapState(['count'])

上面代码的最终得到的是 类似于

count () {<br>   return this.$store.state.count<br>}

3.第三步：利用展开运算符将导出的状态映射给计算属性

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

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