Vuex—基本属性概述

Vuex—基本属性概述

1.概念：通俗来讲，就是提供了一个公共内存，可以给这个内存提交数据，也可以从内存中取数据，组件之间实现数据共享
专业术语：状态管理（数据管理）
2.所以如何安装Vuex呢，
我们在用脚手架创建项目的时候，有三个选项，选择第三个，手动创建 ，其中勾选Vuex即可，在项目中安装Vuex
3.安装完成以后，需要引入Vuex，并且在vue实例上进行挂载
import Vuex from 'vuex' Vue.use(Vuex) 当然 我们首先要引入vue才行 import Vue from 'vue'
4.然后通过new关键字创建 一个仓库实例，并且暴露出去,然后再全局main.js中引入 store 并且 挂载到vue实例上

export default new Vuex.Store({})

5.包含的属性：
a. state属性定义一个数据 用法和作用类似于vue实例中的data
vue实例中的data是一个函数 Vuex.Store({})实例中是一个对象
具体语法：

export default new Vuex.Store({
//state属性专门用来定义数据
state:{
num:15,
count:"666"
}
})

b. 如何使用这些数据呢？
基本方法（例：组件1中）$store.state.数据名称

<p>{{$store.state.num}}</p>

页面中，会渲染出num的具体值

第二种方法：（例：组件2中）
导入mapState，然后再计算属性中，使用

  <p>{{ count }}</p>
    <p>{{ number }}</p>
    
import {mapStore} from "vue"
export default {
computed:{
...mapStore(["num","count"])
}
}

…是扩展运算符，可以展开对象

那么我们可以使用state直接修改数据？ 答案是不可以
所以第二个属性：
b.mutations:定义方法，参数为state对象，在方法内部修改数据
具体语法：

export default new Vuex.Store({
//state属性专门用来定义数据
state:{
num:15,
count:"666"
}，
**mutations:{
changeCountFn(state,n){
//如果需要传入参数，则在后面添加一个形参
state.count += n
}**
}
})

组件中进行修改的方法：
方法1：基本方式 this.store.commit(“changeCountFn”)

//在组件1中给按钮绑定点击事件 
<button @click="changeCount">修改vuex中的数据</button>
export default {
methods:{
changeCount(){
 // 如果要修改vuex中的数据，需要使用commit方法来触发mutations中定义的方法
  // 这种方式传参，只能传一个，不能传多个；如果需要传多个参数，可以封装到数组或者对象中传递即可
      this.$store.commit("changeCountFn", 2)
}
},
}

点击之后：

并且，组件2中的数据也改变为 17

方法2：在组件2中 导入mapMutations ,在methods中使用mapMutations

//需要传参的话，直接在方法中传入即可
//changeCountFn方法名字 必须 和mutations中定义的方法名字一致
<button @click = "changeCountFn(5)">修改state中的count值</button>
import {mapMutations} from "vue"
export default {
methods:{
**...mapMutations(["changeCountFn"])}**
}

点击之后：

注：在mutations中不能异步修改数据，否则vue-dev-tools中的数据无法和页面同步
如果需要异步修改数据，可以定义到 第三个属性 actions中
c:actions 定义异步的方法，默认接收context参数，这个参数类似于Vuex.store实例
//state属性专门用来定义数据

export default new Vuex.Store({
//state属性专门用来定义数据
state:{
num:15,
count:"666"
}，
//其他代码
actions:{
asyncChangeCountFn(context,n){
setTimeout(()=>{
// state.count +=n 即使在actions中，也不能直接修改state中的数据，必须借助mutations中的方法
context.commit("changeFn",n)
},1000)
}
}
})

基本方式： 在组件1中修改异步数据

<button @click="asyncChangeCount">修改异步数据</button>
export default {
  methods: {
//其他代码
    asyncChangeCount(){
          // this.$store.commit('asyncChangeCountFn', 3) 这种方法 每次得到的数据 都是上一次点击后得到的
      // 如果要触发actions中定义的异步方法，就使用dispatch
     this.$store.dispatch("asyncChangeCount",3)
    }
  }
}

点击之后：

第二种方式：导入mapActions 方法中引用即可

//直接在方法中传入参数即可
    <button @click="asyncChangeCountFn(10)">异步修改vuex中的数据</button>
export default {
methods:{
..mapActions(["asyncChangeCountFn"])
}
}

得到的结果 同 方法1

当读取的值需要进一步处理之后在返回时，
d.需要用到第四个属性 getters 这个属性有点类似于计算属性，接收 state作为参数，return返回处理完成的结果
语法：

export default new Vuex.Store({
  // 专门用来定义数据
  state: {
    count: 15,
    number: 666
  },
  // 专门用来定义修改数据的方法
 //其他代码
  // vuex中的getters类似于vue中的计算属性
  getters: {
    // 默认会接收state参数，来访问state中的数据
    showCount(state){
      return '您访问的数据是:' + state.count
    }
  }
})

组件中使用方式：
基本使用 $store.getters.showNum

    <h3>{{ $store.getters.showCount }}</h3>

第二种方法：引入mapGetters 在计算属性用使用即可

//方法名字 与 getters中定义的方法名字一致
    <h3>{{ showCount }}</h3>
import {mapGetters} from "vue"
export default {
computed:{
...mapGetters(["showCount])
}
}