Shulou(Shulou.com)06/01 Report--

First, introduce Vuex

Vuex is a state management model developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way, so it is suitable for building medium-and large-scale single-page applications.

1. What is the state management mode?

Look at a simple example:

Vuex Demo 01 Count is {{counterValue}} Increment + 1 Decrement-1 var app = new Vue ({el: 'body', store: new Vuex.Store ({/ / 1, state), the data source that drives the application State: {count: 0}, mutations: {INCREMENT: function (state, amount) {state.count = state.count + amount}, DECREMENT: function (state, amount) {state.count = state.count-amount}), vuex: {getters: {counterValue: function (state) {return state.count}} / / 3 、 actions Respond to a state change caused by user input on the view. Actions: {increment: function ({dispatch, state}) {dispatch ('INCREMENT', 1)}, decrement: function ({dispatch, state}) {dispatch (' DECREMENT', 1)})

The code identifies:

1. State, the data source that drives the application; 2. View, the data counterValue;3 and actions mapped to the view, responding to the state changes caused by the user input on the view.

Show the relationship between them with a simple schematic diagram:

We know that medium and large applications generally encounter situations in which multiple components share the same state:

1. Multiple views depend on the same state

2. Behaviors from different views need to be changed in the same state.

Therefore, it is necessary to extract the shared state of the component and manage it in a global singleton mode. In addition, it is necessary to define and isolate various concepts in state management and enforce certain rules.

This is the basic idea behind Vuex, drawing on Flux, Redux, and The Elm Architecture. Unlike other patterns, Vuex is a state management library specially designed for Vue.js to take advantage of Vue.js 's fine-grained data response mechanism for efficient state updates.

2. The core concept of Vuex

1. State: a single state tree that contains all the application-level states in one object, exists as a "unique data source (SSOT)", and each application will contain only one store instance.

2. Getters: Vuex allows us to define "getters" in store (which can be thought of as a computational property of store).

3. Mutations in Mutations: Vuex is very similar to events: each mutation has an event type of a string (type) and a callback function (handler). This callback function is where we actually make the state change, and it accepts state as the first argument.

4. Actions: similar to mutation, except that ① Action submits mutation instead of directly changing state; ② Action can contain any asynchronous operation.

5. Modules: in order to solve the bloated problem that a single state tree causes all the states of the application to be concentrated in one store object, Vuex divides the store into modules (module). Each module has its own state, mutation, action, getters, and even nested submodules-- similarly segmented from top to bottom.

Then we begin to build the memo application, and then deepen our understanding of the above concepts in the following introduction to the construction process.

II. Environmental installation

1. Install vue-cli

two。 Initialize the application

Vue init webpack vue-notes-democd vue-notes-demonpm install / / install dependency package npm run dev / / start the service

The result is:

The directory structure is:

III. Functional modules

Let's first take a look at the effect of the demo we are going to do as follows:

The main functional modules are:

Add a new plan, add a new plan, and the edit area displays empty plan content.

After removing a schedule and deleting a schedule, the schedule is missing from the schedule list.

The total duration of all the plans, adding up all the planning time.

IV. Division of project components

Under the adjustment of the original directory structure, the final directory structure is:

The following are described in detail:

1. Component part

1. Home component: Home.vue

My memo.

Create a plan

two。 Calculate the total planned duration component: Sidebar.vue

View Code

3. Schedule list component: TimeEntries.vue

View Code

4. New plan component: LogTime.vue

View Code

2. The data storage in vuex is divided into:

1. Initialize vuex.Store: index.js

Import Vue from 'vue'import Vuex from' vuex'import mutations from'. / mutations'import actions from'. / actions'Vue.use (Vuex); const state = {totalTime: 0, list: []}; export default new Vuex.Store ({state, mutations, actions})

State: a single state tree that contains all the application-level states in a single state object. The store instance Vuex.Store is only new once in the code.

two。 Responsible for triggering events and passing in parameters: actions.js

View Code

In practice, we often use the parameter deconstruction of ES2015 to simplify the code (especially if we need to call commit many times):

Actions: {increment ({commit}) {commit ('increment')}}

3. A way to register various data changes: mutations.js

View Code

Replacing mutation event types with constants is a common pattern in various Flux implementations. This enables tools such as linter to work, while keeping these constants in separate files so that your code collaborators can see at a glance the mutation contained in the entire app:

/ / mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION'mutations: {/ / We can use the ES2015-style computational attribute naming feature to use a constant as the function name [SOME_MUTATION] (state) {/ / mutate state}}

4. Record all event names: mutation-types.js

View Code

With the use of the above constant instead of the mutation event type

3. Initialization part

The template index.html rendered by the entry file is relatively simple:

Vue-notes-demo

The code of the entry file main.js:

View Code

In the code... App is equivalent to render:h = > h (App)

The initialization component App.vue is:

View Code

At this point, the practice is over. I still need to understand some basic things ^ _ ^.

Source code: [vuex2.0 practice]

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.