This is the 21st day of my participation in the August More Text Challenge

Problems with using global objects directly

  1. The data in the global object is normal JavaScript data type, they are not reactive, so it is possible to read the render the first time, but when the data is modified, the interface can not make the corresponding update, which is a big problem

  2. Cannot track global object changes, that is to say, in the application of any of the code, can have a chance to get the global data, and make corresponding change, but we have no way to find out which lines of code, which modified the global data files, so it is very easy to produce the bug, and difficult to track, it’s very dangerous.

  3. Vue is a componentized world, and like our programs, you can see that components are structured like a tree, with global data typically passed from parent to child. Fetching data directly from a component is considered an anti-pattern, which can easily clutter up the data

State management three jie

  • Vuex: vuex.vuejs.org/zh/guide/

  • Redux: redux.js.org/

  • Mobx: mobx.js.org/README.html

Design concept

  • An object-like global data structure – called a store
  • Only specific methods can be called to modify the data

Introduction and installation of Vuex

At the heart of every Vuex application is the Store. A “store” is basically a container that contains most of the states in your app. Vuex differs from a purely global object in two ways:

  • Vuex’s state storage is reactive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.

  • You can’t just change the state in the store. The only way to change the state in a store is to commit mutation explicitly. This allows us to easily track each state change, which allows us to implement tools that help us better understand our application.

A new version of Vuex is installed

NPM install vuex@next --save // Ensure that the installed version is later than 4.0.0Copy the code

Test Vuex store

Import {createStore} from 'vuex' import {createStore} from 'vuex' // Import createStore from vuex. Vue-router also starts with create, which looks very clear. const store = createStore({ state: { count: 0},}) // createStore takes an object as a parameter that contains vuex's kernel concepts. The first concept is called state, which contains the data we want to put in globally shared data. Here we put a simple count. // Now we can access the value directly, we can access it directly with store.state.count. Console. log('store', store.state.count) // Next we change the state. The only way to change the state in Vuex's store is to commit mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). Mutations: This callback is where we actually make the state change, and it will accept state as the first argument: Open mutations (mutations) {add (state) {state.count++}} // With mutations, let's trigger it. To wake up a mutation handler, you need to call the store.mit method with the corresponding type:  store.commit('add') console.log('count', store.state.count)Copy the code

Vuex integrates current applications

Defining store files

import { createStore } from 'vuex' import { testData, testPosts, ColumnProps, PostProps } from './testData' interface UserProps { isLogin: boolean; name? : string; id? : number; } export interface GlobalDataProps { columns: ColumnProps[]; posts: PostProps[]; user: UserProps; } const store = createStore<GlobalDataProps>({ state: { columns: testData, posts: testPosts, user: { isLogin: false } }, mutations: { login(state) { state.user = { ... state.user, isLogin: true, name: 'viking' } } } }) export default storeCopy the code

use

import { useStore } from 'vuex' import { GlobalDataProps } from '.. /store' ... const store = useStore<GlobalDataProps>() const list = computed(() => store.state.columns)Copy the code

Vuex getters

Vuex getters document: vuex.vuejs.org/zh/guide/ge…

Vuex allows us to define “getters” (you can think of them as computed properties of the store) in the store. Just like evaluating properties, the return value of a getter is cached based on its dependency and is recalculated only if its dependency value changes.

getters: {biggerColumnsLen(state) {return state.columns. Filter (c => C.ID > 2).length}} // The getter is exposed as a store.getters object, and you can access these values as properties:  const biggerColumnsLen =computed(()=>store.getters.biggerColumnsLen)Copy the code
getColumnById: (state) => (id: number) => { return state.columns.find(c => c.id === id) }, getPostsByCid: (state) => (id: Number) => {return state.posts.filter(post => post.columnId === id)} // Use the getter in the application to get the two values const column  = computed(() => store.getters.getColumnById(currentId)) const list = computed(() => store.getters.getPostsByCid(currentId))Copy the code

The last

Public number: small he growth, the Buddha department more text, are their own once stepped on the pit or is learned things

Interested little partners welcome to pay attention to me oh, I was: he Small Life. Everybody progress duck together

Recently a little busy, the article may be a little water, have a problem we can pay attention to my public number, exchange together