current position:Home>Use of vuex in uniapp

Use of vuex in uniapp

2021-08-27 05:43:16 Sun Bujian 1208

3、 ... and 、Store Simple and practical

1、State

Single state tree , Defines the default initial value of the application state , The page displays the data needed to read from the object .

  • Vuex Use a single state tree , One object contains all the application level states . It acts as a “ Unique data source ” And exist . It also means that , Each application will contain only one store example .
  • A single state tree allows us to directly locate any particular state fragment , In the process of debugging, you can easily get a snapshot of the current application state .
  • Not directly to state Make changes , Need to pass through Mutation Method to change .

because Vuex The state store of is responsive , from store The easiest way to read a state in an instance is to return a state in a calculated property :

//  Create a  Counter  Components 
const Counter = {
    computed: {
        count () {
            return store.state.count
        }
    }
}
 Copy code 

whenever store.state.count When it changes , Will re evaluate the calculated properties , And trigger the update associated with DOM.

However , This mode causes the component to rely on the global state singleton . In a modular building system , In every need to use state Need to import frequently in the components of , And you need to simulate state when testing components .

Vuex adopt store Options , Provides a mechanism to move state from the root component “ Inject ” Into each subcomponent ( Need to call Vue.use(Vuex)):

To configure State

<!--  Page path :store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) //vue Plug in mechanism of 

const store= new Vuex.Store({
	// store  It's equivalent to data, It is specially used to store global data 
	state:{
		"name":" Sun Bujian 1208",
        "age":18
    },
	getters:{
		
	},
	mutations:{
		
	},
	actions:{
		
	},
	modules:{
		
	}
})

export default store
 Copy code 

obtain state

1. Access through properties , You need to inject store .

<!--  Page path :pages/index/index.vue -->
<template>
    <view>
        <text> user name :{{username}}</text>
    </view>
</template>
<script> import store from '@/store/index.js';// Need to introduce store export default { data() { return {} }, computed: { username() { return store.state.username } } } </script>
 Copy code 

2. Use in components , adopt this.$store Access to the state The data in .

<!--  Page path :pages/index/index.vue -->
<template>
    <view>
        <text> user name :{{username}}</text>
    </view>
</template>
<script> export default { data() { return {} }, computed: { username() { return this.$store.state.username } } } </script>
 Copy code 

mapState

3. adopt mapState Auxiliary function acquisition .

When a component needs to get multiple states , It's a bit repetitive and redundant to declare these states as calculated properties . To solve this problem , We can use mapState Auxiliary function Help us generate calculated properties , Let you press the key a few times less :

<!--  Page path :pages/index/index.vue -->
<template>
    <view>
        <view> user name :{{username}}</view>
        <view> Age :{{age}}</view>
    </view>
</template>
<script> import { mapState } from 'vuex'// introduce mapState export default { data() { return {} }, computed: mapState({ //  from state Get the data   The arrow function makes the code simpler  username: state => state.username, age: state => state.age, }) } </script>
 Copy code 
  • When the name of the mapped calculated property is the same as state The names of the child nodes of are the same , We can also give mapState Pass an array of strings .
<!--  Page path :pages/index/index.vue -->
<template>
    <view>
        <view> user name :{{username}}</view>
        <view> Age :{{age}}</view>
    </view>
</template>
<script> import { mapState } from 'vuex'// introduce mapState export default { data() { return {} }, computed: mapState([ 'username',// mapping  this.username  by  store.state.username 'age', ]) } </script>
 Copy code 
  • In order to be able to use this Get the component's own data data , You have to use regular functions .
<!--  Page path :pages/index/index.vue -->
<template>
    <view>
        <view> user name :{{username}}</view>
        <view> Age :{{age}}</view>
    </view>
</template>
<script> import { mapState } from 'vuex'// introduce mapState export default { data() { return { firstName:"Li" } }, computed: { ...mapState({ username: function (state) { return this.firstName + ' ' + state.username }, age: state => state.age, }) }, } </script>
 Copy code 
  • Use the object expansion operator

mapState Function returns an object . Use the object expansion operator to merge multiple objects into one , So that we can pass the final object to computed attribute . Greatly simplify the way of writing :

<!--  Page path :pages/index/index.vue -->
<template>
    <view>
        <view> user name :{{username}}</view>
        <view> Age :{{age}}</view>
    </view>
</template>
<script> import { mapState } from 'vuex'// introduce mapState export default { data() { return {} }, computed: { // Use the object expansion operator to blend this object into an external object  ...mapState({ username: state => state.username, age: state => state.age, }) }, } </script>
 Copy code 
const store = new Vuex.Store({
    //  there state  It's equivalent to... In the component data, Dedicated to storing shared data 
    state:{
		msg  
	}
})
 Copy code 

copyright notice
author[Sun Bujian 1208],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827054314195S.html

Random recommended