Vuex中的store

第一步：首先你要具备实战它的载体，那就是你有已经跑起来的vue项目。

第二步：安装vuex,引入vuex

npm install vuex --save

import Vuex from 'vuex'

Vue.use(Vuex)

第三步：在vue->src目录下创建一个store.js文件

首先引入vue,因为$store是在vc身上

// store.js文件

// 引入vue
import Vue from "vue";
// 安装并引入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

有了上边的引入，我们就可以使用store了。在使用store的时候，我们的思想是：

1.创建   2.使用

1.创建并导出：

// store.js文件

const store = new Vuex.Store({})

export default store

2.使用并配置

// main.js文件

//引入
import store from './vuex/store'

//配置
new Vue({
  el: "#app",
  // 这里的store是一个配置，名字是store
  store,
  render: h => h(App),
})

此时，在App.vue中mounted中打印this,就会看到vc身上的$store了

 接下来，我们开始学习store中的几个对象，按照官网的顺序来

目录

 一、state

 二、getters

三、mutations

四、actions

五、案例

---

---

 一、state

类似于vue中的data,是唯一数据源，是一个对象

 state: {
    sum: 200,
    todoList: [
      { id: '01',name: '张三' },
      { id: '02',name: '李四' },
    ]
  },

 

 二、getters

和vue中的计算属性类似，state中的数据发生变化时，它就会触发，并且会自动保存修改了的内容。而且它是页面一进来就自动执行了。为了看出来效果，为页面增加了input。我们运行的vue看到的页面目前是写在App.vue中，所以我的input输入框也写在了App.vue中。

// store.js文件

const store = new Vuex.Store({
  state: {
    sum: 200,
  },
  getters: {
    showList: s => {
      // 这里的第一个参数 s 是state本身
      console.log('getters中showList的第一个参数s',s)
      console.log('s.sum',s.sum)
    },
  }
})


// App.vue文件
// getters的触发写在computed中

<div>
  <input v-model="$store.state.sum"/><br><br><br>
  <input v-model="showList"/>
</div


// 在script中引入
import {mapGetters} from 'vuex'


// 写在vue的计算属性中
// 写在计算属性中的内容要被使用，才能执行getters中的内容，所以有了第二个input输入框
  computed: {
    ...mapGetters([
        'showList'
    ]),
  }

 还可以在getters对象中为state增加新的内容，方法如下：

// 为s这个参数增加一个新的名为newProp的属性，属性内容是...
Vue.set(s, 'newProp', '我是新增的属性')

三、mutations

约等于vue中的methods,主要是写一些同步操作的方法。这里的方法可接收两个参数，我们先看看两个参数分别是什么。

// store.js文件
  
mutations: {
    AddNum(a,b) {
      console.log('mutations-AddNum-a',a)
      console.log('mutations-AddNum-b',b)
    }
  }


// App.vue文件
// mutations的触发写在methods中

<button @click="AddNum">点我</button>

import {mapMutations} from 'vuex'


methods: {
  ...mapMutations([
      'AddNum'
    ])
}

 

 参数a是state,参数b不知道是什么，目前看不出来，一会再看。

四、actions

一样约等于vue中的methods,但是这个和上边的mutations的区别就是这个是可以异步操作的，而mutations是同步操作。典型的异步操作是写一个定时器，我写了一个5秒后执行的定时器，由于不好演示，请小可爱自己写的测试一下。

它可以接收两个参数，我们先来看一下它第一个参数是什么

为了看出第一个参数是什么，我在App.vue的mounted中打印了this.$stroe

// store.js文件

actions: {
    addNum(a) {
      console.log('actions',a)
    }
  }

// App.vue文件

//3. 使用
<button @click="addNum">actions</button>

// 1.引入
import {mapActions} from 'vuex'

//2. 写入
methods: {
   ...mapActions([
        'addNum'
    ])
}

 从actions的结果往上看，可以看出来在actions中的内容在store中都可以找到，固actions的第一个参数有迷你版store之称，通常这个参数名称写为context

在App.vue文件中写入actions还有一种方法就是使用store.dispatch()触发，使用这这种方法可以为它传值，这样就带出来了actions的第二个参数。

//App.vue文件

methods: {
    addNum(){
      // 触发一个名为 addNum 的事件，
      // 为它传值 5
      this.$store.dispatch('addNum',5)
    },
}

// store.js文件
  actions: {
    addNum(context,payload) {
      console.log('actions',context)    // 迷你版的store
      console.log('actions',payload)    // 接收传过来的值=5
    }
  }

 actions还有一个作用就是触发mutations，通过commit()方法

// App.vue文件

<button @click="addNum">actions</button>
addNum(){
  this.$store.dispatch('addNum',5)
},

// store.js文件

  // 用addNum中的第一个参数触发mutations对象中名为AddNum的事件
  // 将addNum的第二个参数传给mutations中的事件
  actions: {
    addNum(context,payload) {
      context.commit('AddNum',payload)
    }
  }

  mutations: {
    // 参数是actions中传过来的
    AddNum(context,payload) {
      console.log('context',context)
      console.log('payload',payload)
    }
  },

 

 此时再来看mutations中的第二个参数，原来是传过来的参数啊~

五、案例

好了，几个重要的对象和它们之间的联系介绍完了，接下来做一个简单的加减数操作，使用dispatch(),commit()方法。注意方法之间的联系和名字的统一。

// App.vue文件
<template>
  <div id="app">
    <button @click="reduceNum">-1</button>
    <input v-model="$store.state.sum"/>
    <button @click="addNum">+100</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    // -
    reduceNum() {
      this.$store.dispatch('reduceNum',1)
    },
    // +
    addNum() {
      this.$store.dispatch('addNum',100)
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// store.js文件
// 安装并引入vue
import Vue from "vue";
// 安装并引入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    sum: 200,
  },
  mutations: {
    // -
    ReduceNum(state,payload) {
      state.sum -= payload
    },
    // +
    AddNum(state,payload) {
      state.sum += payload
    },
  },
  actions: {
    // -
    reduceNum(context,payload) {
      context.commit('ReduceNum',payload)
    },
    // +
    addNum(context,payload) {
      context.commit('AddNum',payload)
    }
  }
})
export default store

 好了，今天的笔记就记到这里了，如果某位小可爱看完后觉得我写的不清晰的地方欢迎留言，或者发现我记笔记有什么不妥的地方欢迎留言~