1. Introduction to vuex

1. Overview
vuex uses a tool to centrally manage shared data that components depend on, which can solve the problem of data sharing between different components
vuex official website: Start | Vuex

2. Five major attributes:
state (storage shared state data)
mutations (modify data - only synchronous code can be executed)
actions (perform asynchronous operations, data is submitted to mutations for modification)
getters (computed attributes of state)
model (modularization)

2. Install and configure vuex in the project

1. Create a new scaffolding project and apply vuex in the project

vue create demo

2. Install vuex

npm i vuex --save

If the following error occurs, it means there is a problem with the version

You can enter the following command in the terminal and press Enter: npm install --save [email protected]

3. Set as follows in main.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex)
const store = new Vuex.Store({})
new Vue({
  el: '#app',
  store
})

3. Definition and use of the five attributes

① Definition and use of state

1. Define state data

const store = new Vuex.Store({
  state: {
    count: 1,//定义state数据
  },
})

2. Use state data

Method 1: Raw form - interpolation expression $store.state.xx

<div>原始形式获取state:{
   
   { $store.state.count }}</div>

Method 2: Computed property - define the state property in the calculated property

<div>计算属性获取state:{
   
   { count }}</div>

 computed: {
    count () {
      return this.$store.state.count
    }
  }

Method 3: Helper function - mapState

<div>辅助函数获取state:{
   
   { count }}</div>

//第一步：导入mapState
import { mapState } from 'vuex'
//第二步：利用延展运算符将导出的状态映射给计算属性
 computed: {
    ...mapState(['count'])
  }

②The definition and use of mutations

1. Define mutations

const store = new Vuex.Store({
  mutations: {
    //不带参
    addCount1 (state) {
      state.count += 1
    },
    //带参数
    addCount2 (state, payload) {
      state.count += payload //payload为调用方法传过来的参数
    }
  }
})

2. Use mutations method

Method 1: Original form-$store
this.$store.commit('method name defined in mutations'),
this.$store.commit('method name defined in mutations', parameters)

<button @click="addFn1">原始方式调用mutations方法-不带参</button>
<button @click="addFn2">原始方式调用mutations方法-带参数</button>

  methods: {
    addFn1() {
      this.$store.commit("addCount1");//不带参数
    },
    addFn2() {
      this.$store.commit("addCount2", 2);//带参数
    },
  },

Method 2: Helper function - mapMutations

<button @click="addCount1">+1</button>

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount1'])
}

③Definition and use of actions

1. Define actions

const store = new Vuex.Store({
  actions: {
    // 不带参数,context等同于this.$store
    getAsyncCount1 (context) {
      setTimeout(function () {
        context.commit('addCount1')
      }, 1000)
    },
    // 带参数,context等同于this.$store,params代表调用方法传过来的参数
    getAsyncCount2 (context, params) {
      setTimeout(function () {
        context.commit('addCount2', params)
      }, 1000)
    }
  }
})

2. Use the actions method

Method 1: Original call - $store

 <button @click="addAsyncFn1">原始方式调用actions方法-不带参</button>
 <button @click="addAsyncFn2">原始方式调用actions方法-带参数</button>

methods: {
    addAsyncFn1(){
      this.$store.dispatch("getAsyncCount1")//不带参数
    },
    addAsyncFn2(){
      this.$store.dispatch("getAsyncCount2",2)//带参数
    }
  },

Method 2: Auxiliary function-mapActions

 <button @click="getAsyncCount2(2)">辅助函数调用actions方法</button>

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['getAsyncCount2'])
}

Note: Here are the methods that require parameters in the called mutations.

④ Definition and use of getters

1. Define getters

const store = new Vuex.Store({
  state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
   getters: {
    // filterList: function (state) {
    //   return state.list.filter(item => item > 2)
    // }
    filterList:  state =>  state.list.filter(item => item > 2)//简写
  }
})

2. Use getters data

Method 1: Original method-$store

 <div>原始形式获取getters:{
   
   { $store.getters.filterList }}</div>

Method 2: Helper function - mapGetters

<div>辅助函数获取getters:{
   
   { filterList }}</div>

import { mapGetters } from "vuex";
computed: {
    ...mapGetters(['filterList'])
}

⑤ Definition and use of Module

1. Define Module module

const store  = new Vuex.Store({
   modules:{
    user:{
      state:{
        token:"12345"
      }
    },
    setting:{
      state:{
        website:"https://www.baidu.com/"
      }
    }
  }
  })

2. Use data in the Module module

<div>用户token: {
   
   { $store.state.user.token }}</div>
<div>网站地址: {
   
   { $store.state.setting.website }}</div>

At this time, to obtain the status of the submodule, you need to obtain it through $store. . . state模块名称属性名

3. Optimize the above writing method

Step 1: Write the following in the outermost getters

  getters: {
    token: state => state.user.token,
    website: state => state.setting.website
  },

Step 2:

<div>token:{
   
   {token}}</div>
<div>website:{
   
   {website}}</div>

import { mapGetters } from "vuex";
  computed: {
     ...mapGetters(["token","website"])
  },

Teach you step-by-step how to use vuex, and solve errors during use and installation.