<>1.Vuex What is it? ?

Vuex Is to implement the global state of the component ( data ) A mechanism of management , It is convenient to share data between components .

<>2. use Vuex Benefits of unified management state

* Be able to vuex Centralized management of shared data in , Easy to develop and maintain
* The data can be shared directly and efficiently , Improve development efficiency
* Store in vuex The data in is responsive , It can realize the synchronization of data and page
<>3. What kind of data is stored in Vuex in

Normally , Only data shared between components , It's necessary to store it in the vuex in , Private data for components , It's still stored in its own memory data Medium .

<>4. Download and use Vuex

* download npm install vuex -S //S Represents the use of the production environment
* Import vuex package
This is in the main.js Import from import Vuex from 'vuex' Vue.use(Vuex)
* establish store object const store = new Vuex.Store({ state:{count:0}
//state The data stored in is the global shared data })
* take store Object mount to vue In the example new Vue({ el:"#app", render:h => h(app), // Rendering app And components router
, // Mount routing store })
<>5.Vuex The core concept of

* State
* Mutation
* Action
* Getter
State: Provide a unique public data source , All the shared data should be put in the same place Store Of State Storage in
// establish store data source , Provide unique public data const store = new Vuex.Store({ state:{count:0} })
mutations:
mutations How to change it state The logic of the state in . change Vuex In state The only way to do that is , Submit mutation, Namely store.commit(‘increment’).

actions:
because mutations Can only be synchronous operation in , But in the actual project , There will be asynchronous operations , that actions It is set for asynchronous operation . such , It's like being in the action Submit in mutation, And then in the methods Submit in action. Just submit actions I used it when I was young dispatch function , and mutations It's using commit function .

Getter: Sometimes we need to start from store In state
Some states are derived from , For example, filter and count the list . You can use it here getters,getters Can be seen as store Calculation properties of , The parameters are state.
const store = new Vuex.Store({ state: { todos: [ {id: 1, text: 'reading', done:
true}, {id: 2, text: 'playBastketball', done: false} ] }, getters: { doneTodos:
state=> { return state.todos.filter(todo => todo.done); } } });

Technology
©2019-2020 Toolsou All rights reserved,
vue Changes in data Interface not updated Python realization js And Django Front and back interaction in the background JavaSwing To achieve a simple Lianliankan games C# Making a simplified version of calculator elementui Shuttle box el-transfer Display list content text too long JVM summary Regression of dependent variable order categories (R language )【C#】 The realization of student achievement information management system use css Design a simple style html login interface C language --------- Tetris ( source code )