How to use vuex state and mapState

This time I will show you how to use vuex state and mapState, and what are the precautions for using vuex state and mapState. The following is a practical case, let's take a look.

First use vue cli to build your own vue project

1.npm i -g vue-cli

2.vue init webpack sell (sell is you Project name)
3. Press Enter all the way (during this process you will be prompted whether to install some dependent packages, such as vue-router, es6 grammar check, etc., select Y/N based on your personal habits or hobbies)
4.npm i (This is the dependency package of the installation project)
5.npm run dev (start your vue project) At this time, if you see the vue logo on the page, it means that your vue project base has been built Completed, then you can delete the useless components
6. Webpack sell does not install vuex by default, so you need to install vuex; press ctrl c twice on the command line to end the server, npm install vuex –save to install vuex.
7. Create a new vue component in your src directory. Let’s name it helloVuex (you can name it as you like, just be happy). This component is mainly used as the main container and only displays content
8. Then create a new one What the hell is the component called (I’ll call it the
display component here) used to accept the state in the state 9. Next, we create a new folder called store in the src directory, and create a new one under the store js file, called test.js (the store here is our front-end data warehouse) uses vuex for state management. Store is the core of vuex, so it is named store. Create a new store file in the src directory, and create a new test.js in the store directory. Documentation (below). You can see that before using vuex, you need to tell vue to use it, Vue.use(Vuex); We only have one variable count to manage here, so when creating the store object, pass parameters to the
constructor, state There is only one count below, and it is initialized to 0.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
 count: 0
 }
export default store

Now all the status, that is, the variables are placed in test.js, so how can our component get the status modification value? There are two steps to be performed here

1. Vue provides an injection mechanism, which is to inject our store object into the root instance. The root instance of vue is the new Vue constructor, and then in all subcomponents, this.$store points to the store object. In test.js, we export store and the store has been exposed. new Vue() is in main.js, so we can directly introduce the store in main.js and inject it.

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/test'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

2. In child components, use the computed attribute. The computed attribute is automatically updated based on its dependencies. So as long as the state in the store changes, it will automatically change. Make the following changes in display.vue. This.$store in the subcomponent points to the store object. We change the count in test.js to 8, and it becomes 8 on the page.

<template>
 <p>
  <h3>Count is {{count}}</h3>
 </p>
</template>
<script>
 export default {
  computed: {
   count () {
    return this.$store.state.count 
   }
  }
 }
</script>

3. The status value can be obtained through the computed attribute, but every attribute (such as count) in the component is a function. If there are 10, then 10 functions must be written, and 10 must be written repeatedly. It is not very convenient to return this.$store.state all the time. Vue provides the mapState function, which maps state directly to our components.

Of course you must introduce mapState before using it. It can be used in two ways, either accepting an object or an array. Still under the display.vue component.

The object usage is as follows:

<script>
 import {mapState} from "vuex"; // 引入mapState 
 export default {
　　　　　　// 下面这两种写法都可以
  computed: mapState({
   count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁  
   count: 'count'　　　　　　　　　// 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count,
  })
 }
</script>

The array method is as follows:

<script>
 import {mapState} from "vuex";
 export default {
  computed: mapState([ // 数组
   "count"
  ])
 }
</script>

4, There is one last question, what if we also have computed properties inside our components? It doesn't belong in mapState. Then we use object segmentation to divide the objects generated by the mapState function into one by one. Just like at the beginning, we listed the calculated attributes one by one. If there are 10 attributes, we will write 10 functions.

The... in es6 is used for splitting, but it can only split arrays. It can split objects in ECMAScript stage-3, so babel-stage-3 is also used at this time; npm install babel-preset-stage-3 --save-dev. After the installation is complete, don’t forget to add babel in babelrc In the

configuration file, write stage-3,

, otherwise an error will always be reported. Add a p tag to the page to display the calculation familiarity of our component

babelrc

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-3"
 ],
 "plugins": ["transform-runtime"],
 "env": {
 "test": {
  "presets": ["env", "stage-3"],
  "plugins": ["istanbul"]
 }
 }
}

display.vue After the component is changed

<template>
 <p>
  <h3>Count is {{count}}</h3>
  <p>组件自己的内部计算属性 {{ localComputed }}</p>
 </p>
</template>
<script>
 import {mapState} from "vuex";
 export default {
  computed: {
   localComputed () {
    return this.count + 10;
   },
   ...mapState({
    count: "count"
   })
  } 
 }
</script>

put test. Change state.count in js to 10 to see an effect

Let’s take a look at the usage of mapState in Vuex

今天使用Vuex的时候遇到一个坑，也可以说是自己的无知吧，折腾了好久，终于发现自己代码的错误了。真是天雷滚滚~~~~~~

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
Vue.use(Vuex)
const state = {
 userInfo: { phone: 111 }, //用户信息
 orderList: [{ orderno: '1111' }], //订单列表
 orderDetail: null, //订单产品详情
 login: false, //是否登录
}
export default new Vuex.Store({
 state,
 getters,
 actions,
 mutations,
})
computed: {
   ...mapState([
    'orderList',
    'login'
   ]),
  }, 
  mounted(){ 
   console.log(typeof orderList); ==>undefind
   console.log(typeof this.orderList)==>object
  }

mapState通过扩展运算符将store.state.orderList 映射this.orderList  这个this 很重要，这个映射直接映射到当前Vue的this对象上。

所以通过this都能将这些对象点出来，同理，mapActions, mapMutations都是一样的道理。牢记~~~

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用Vue实现倒计时按钮

怎样利用Vue写一个双向数据绑定

The above is the detailed content of How to use vuex state and mapState. For more information, please follow other related articles on the PHP Chinese website!