[Vue Basics] Shangpinhui Project-06-vuex Modular Development

Vuex is an official plug-in, state management library, and centralized management of data shared by components in the project.

Table of contents

1. Installation

Second, the basic use of vuex

3. Vuex modular development

---

1. Installation

Install command:

npm install [email protected] --save

If the wrong version is installed, uninstall and then reinstall, the uninstall command is as follows:

cnpm uninstall vuex --save

Second, the basic use of vuex

1. Create a new folder under the src directory and name it "store"

 Create a new file "index.js" in this folder

 Add the following code:

import Vue from 'vue'
import Vuex from 'vuex'

//需要使用插件一次
Vue.use(Vuex)


const state = {}  // 仓库存储数据的地方

const mutations = {}  // 修改state的唯一手段
const actions = {}  // 处理actions，可以书写自己的业务逻辑，也可以处理异步
const getters = {}  // 理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便

//对外暴露Store类的一个实例
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

 2. Register the warehouse in main.js and import the warehouse

 At this time, there will be an additional $store attribute on the component instance

3. In order to observe the data in the warehouse, here is a demo

First add data in "store/index.js":

 In order to display the value of count, add the following code in "src/pages/Home/index.vue":

 If you want to add a button to modify the count value in the warehouse, first add the following code in "src/pages/Home/index.vue":

 Then add the following code in "src/store/index.js":

 At this point we click the button to complete the +1 function

3. Vuex modular development

First delete the code for editing the demo. After deletion, the code of "src/pages/Home/index.vue" is as follows:

<template>
  <div>
    <TypeNav></TypeNav>
    <ListContainer></ListContainer>
    <Recommend></Recommend>
    <Rank></Rank>
    <Like></Like>
    <Floor></Floor>
    <Floor></Floor>
    <Brand></Brand>
  </div>

</template>

<script>
//引入其余组件
import ListContainer from '@/pages/Home/ListContainer'
import Recommend from '@/pages/Home/Recommend'
import Rank from '@/pages/Home/Rank'
import Like from '@/pages/Home/Like'
import Floor from '@/pages/Home/Floor'
import Brand from '@/pages/Home/Brand'

export default {
  name: '',
  components: {
    ListContainer,
    Recommend,
    Rank,
    Like,
    Floor,
    Brand
  }
}
</script>

<style>
</style>

 The code of "src/store/index.js" is as follows:

import Vue from 'vue'
import Vuex from 'vuex'

//需要使用插件一次
Vue.use(Vuex)

//对外暴露Store类的一个实例
export default new Vuex.Store({

})

In order to realize that the data of each small warehouse corresponds to a module, first create two folders in "src/store", named "home" and "search", which are used to store the data of the home and search modules respectively

 Create a new index.js under these two folders

 Edit the two index.js codes as follows:

//home模块的数据仓库
const state = {}
const mutations = {}
const actions = {}
const getters = {}

export default {
    state,
    mutations,
    actions,
    getters
}

//search模块的数据仓库
const state = {}
const mutations = {}
const actions = {}
const getters = {}

export default {
    state,
    mutations,
    actions,
    getters
}

Merge the two small repositories into the big one. Open "src/store/index.js" and add the following code:

 At this point, you can see in the console that the large warehouse is divided into small warehouses for storage

 For example, the home warehouse has a=1

 The search warehouse has a b=2

At this point, you can see the data stored in the sub-modules as follows: