<>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
Daily Recommendation