浅学Vuex -- 大二下

Vuex

官方：用集中式存储管理应用的所有组件的状态，并用相应的规则保证状态以一种可预测的方式发生变化。
人话：用一个对象来响应式的管理多个组件的共同数据
Vuex就是提供了这样的一个在多个组件间共享状态的插件

基本操作

1. 先下载vuex插件
2. 创建store文件夹，在这个文件夹的目录下面的index.js中，先引入vuex，然后安装vuex插件，再创建Vuex对象，完善对象中的内容，最后导出store对象
3. 在main.js中引入store

在一个项目里面，只能创建一个store

一个简单的vuex创建，这个是vuex里面的index.js

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

// 安装插件
Vue.use(Vuex)

// 创建对象
const store = new Vuex.Store({
  state:{
    counter: 1000
  },
  mutations:{
    increment(state) { 
      state.counter ++;
    },
    decrement(state) {
      state.counter --;
    },
  },
  actions:{
  },
  getters:{
  },
  modules:{
  }
})
// 导出store对象
export default store

这个是app.vue里面想用vuex里面的函数时要这样调用

methods: {
  addition() {
    this.$store.commit('increment');
  },
  subtraction() {
    this.$store.commit('decrement');
  }
}

如果想在组件中使用vuex里面的state，那么就使用mustache语法，里面的内容就是$store.state.xxx

vuex中的属性含义

1. state: 用来存放状态的相关信息

2. getters：类似组件中的计算属性，内部函数都会有默认参数，第一个默认参数是state（就是上面存放数据的state），第二个默认函数是getters（就是他本身）
   如果在组件中想使用getters里面的函数，则需要使用mustache语法$store.getters.xxx，xxx就是函数名，如果需要传参，则可以让getters里面的方法返回一个函数，然后在调用的时候直接在小括号里面传入参数

3. mutations：是store唯一更新的方式 内部函数的参数第一个就是state，从第二个就是从组件传过来的参数(payload)，当然我们的payload也可以是一个对象 必须是同步方法
   mutations的提交风格有两种，具体可以参考下面的代码：(代码是App.vue里面的script)

addCount(count) {
  // 第一种，通过commit来提交
  this.$store.commit('incCount', count)
  // 第二种直接提交一个对象，type属性填的是mutations里面定义好的函数，这种情况下mutations里面的第二个参数则是一个对象(也就是我们的payload)
  this.$store.commit({
    type: 'incCount',
    count
  })
}

• mutations的响应规则
  • 提前在store中初始化好所需要的属性
  • 给state中的对象添加新属性的时候，使用以下两种方式
  • 使用Vue.set(obj, ‘newProp’, 123)
  • 用新对象给旧对象赋值
  • 删除对象属性使用 Vue.delete(state.xxx, ‘yyy’) 这个就是删除state里面xxx对象的yyy属性
    可以将mutations里面的变量名字最好抽成常量，这样对大型代码的维护会很方便

4. action：用来代替mutations来进行异步操作的
   action里面方法的第一个参数是context(上下文)，也就是我们的$store，如果想在app.vue中使用方法，就要用dispatch;第二个参数就是在app.vue里面传入的payload
   在action里面如果想使用mutations里面的方法，那就得commit，例如：

aupdataInfo(context) {
  setTimeout(()=>{
    context.commit("updataInfo")
  },1000)
}

5. modules：当想对store进行一些抽离的时候，可以在modules中分模块，modules中可以分很多个类似store的模块，每个模块中都会拥有自己的state,mutations,actions之类的
   如果在modules里面定义了a模块，如果在app.vue中使用，那就需要使用mustache语法，里面的内容是$store.state.a.xxx，其他的在app.vue中使用和别的没有区别
   在模块中getters里面的方法要是想使用最开始的state，就给传参的时候传入第三个参数，第三个参数就是我们的rootstate