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-cli2.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
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 } })
<template> <p> <h3>Count is {{count}}</h3> </p> </template> <script> export default { computed: { count () { return this.$store.state.count } } } </script>
<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>
<script> import {mapState} from "vuex"; export default { computed: mapState([ // 数组 "count" ]) } </script>
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 componentbabelrc
{ "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"] } } }
<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>
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中文网其它相关文章!
推荐阅读:
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!