Using Vuex in nuxt

introduction

Using Vuex in nuxt to reference in a modular way -- counter as an example

Counter example

directory structure

directory structure

js module writing

// user.js
// state is a function. Pay attention to the arrow function
const state = () => ({
  counter: 6
})

// mutations as an object
const mutations = {
  increment(state) {
    state.counter++
  },
  decrement(state) {
    state.counter--
  }
}
const actions = {

}
const getters = {

}
export default {
  namespace: true,	// Namespace
  state,
  mutations,
  actions,
  getters
}

If there is no namespace, by default, each xxx.vue The files will be stored in the store folder xxx.js Corresponding

vue writing

1. Direct access

Directly from user.js Get state in module

<!-- user.vue -->
<div class="display-1">{{this.$store.state.user.count}}</div>

2. computed access

Use computed to monitor the change of state in Vuex and render to the interface in time. If you receive the state of Vuex in data, you may not be able to monitor the change of state [1]. In a word, use calculated to accept the state of Vuex

Introduction to computed:

  1. Complex logic for variables or methods, such as the reverse string example on the vue website
  2. Compared with methods, computed has a caching mechanism, and the same result will not be calculated repeatedly, while the method in methods is calculated every time it is called
// Introducing mapState from vuex
import { mapState } from 'vuex'
<!-- user.vue html part -->
<div class="display-1">{{counter}}</div>
<div class="display-1">{{tag}}</div>
// user.vue  The first way to write computed part
computed:mapState('user', {
   counter: state => state.counter // Pay attention to writing, no brackets
}),
// user.vue  The second way to write computed part, ordinary function
computed:mapState('user', {
    counter: function(state) {
    	return state.counter
    }
}),
// user.vue  The third writing method of computed part
computed:mapState("user", ['counter'])
// user.vue  The fourth writing method of computed part
// Method coexists with mapState
computed:{
    tag(){	// method
        return 'something'
    },
    ...mapState('user', {
	counter: function(state) {
    	    return state.counter
    	}
    }),
}

mapState({}| []) function is specially used to receive state from Vuex, an object or an array,

... mapState() describes:

Because mapState() cannot be written directly into the computed object, and the computed method must be written into the computed object, in order to make the method and state coexist, the... mapState() method is introduced

... is the object extension character. After adding it, you can coexist with other methods in the computed object. If there is no method, you can directly write the first or second method

Triggering transitions

// Triggering modes
this.$store.commit("mutationName", [parameter])
// mutations as an object
const mutations = {
  increment(state) {
    state.counter++
  },
  decrement(state) {
    state.counter--
  }
}

code

index.vue Reference in user.js modular

// index.vue
<template>
  <div id="index">
    <div class="display-1">
      <b-icon icon="person"></b-icon>
      <b-icon icon="person-fill"></b-icon>
      <b-icon icon="triangle"></b-icon>
    </div>
    <div class="display-1">{{counter}}</div>
    <div class="display-1">{{tag}}</div>
    <div>
      <b-button variant="outline-success" @click="increment">increase</b-button>
      <b-button variant="outline-success" @click="decrement">reduce</b-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  // Triggers transitions on initialization
  fetch({ store }) {
    store.commit('user/increment') 
  },
  mounted() {},
  data() {
    return {}
  },
  methods: {
    increment() {
      this.$store.commit('user/increment')
    },
    decrement() {
      this.$store.commit('user/decrement')
    }
  },
  computed: {
      tag(){
          return 'something'
      },
      ...mapState('user', {
      	  counter: state => state.counter
      })
  },
  components: {}
}
</script>

<style scoped>
#index {
  min-height: 100%;
}
</style>

reference resources

[1] Introduction to vuex (2) - details of state,mapState,...mapState object expander https://blog.csdn.net/dkr380205984/article/details/82185740

Tags: Javascript Vue

Posted on Thu, 28 May 2020 06:42:42 -0700 by sanand158