vuex state management entry

What is vuex

Is a peer centralized data management status tools. You can solve the problem of transfer between components

Multi-component shared state (variables), there is a lot of data with components

2 is greater than the number of components, and any other components a component to be altered to modify

Achieve a communication component

Store
the core of every Vuex application is to store (warehouse). "Store" is basically a container that contains most of the state (state) of your application.

use

1. installation

npm install vuex

1. Creating store / index.js

a. vuex
impote vuex form 'vuex'

b. 创建store对象
const store = new Vuex.Store({
    states:{
    //全局变量
    },
    
})
c. 导出store
    export dafault store
d. 在main.js中引入
    import store from "./store"
    new Vue({
        store
    })

Basic use

1. Acquiring global status value this. $ Store.state.xxxx
2. Modify global status
   1. Synchronization: mutations
   2. Asynchronous first action again mutation

Five Properties

1.state data

• Shared data project

 state:{
    name:'韩梅梅',
    age:'16',
    sex:0,
    phone:1231312313
  },

2.mutations: synchronization method

//修改state里数据的唯一途径
  mutations:{
    changeStateName(state,params){
      // state 全局状态数据
      //params 通过commit 触发传递的方法
      console.log('修改state数据',state,params)
      state.name=params.us     
    }
  }
   
this.$store.commit("")//触发mutations的某一个方法，第一个参数是名字  

3.actions: asynchronous method

• When vuex appear asynchronous, it should be placed in actions, not necessarily
  • The package can be asynchronous code, unified management asynchronous

 // 异步存放的地方  请求成功后发起 commit 
  actions:{
    getNetName(context,params){
      console.log('触发actions',arguments)
      let {commit}=context
      setTimeout(()=>{
        let  name='来自星星的名字'
        commit('changeStateName',{us:name,ps:123})
      },500)
    }
  }

this.$store.dispatch("")  //发送一个请求，第二个参数是一个对象

4.getters: Derived properties

• The global state of the data management, calculation similar to the properties of vue
• It is associated with the data state, state data changes, getter will be executed

  // 做数据的处理
  getters:{
    doubleName(state){
      return state.name+state.name 
    }
  }

5.modules: Modular

• state the name of the module will be added, others will not be added to the module name
• namespace: true namespaces to prevent different modules have the same name

moudles:{
    'a':{
        state:{name:"zhangsan"}，
        getters：{}
    },
     'b':{
         state：{age:18}
     }
}
//不分模块写法：store.state.name
//分模块写法：store.a(模块名).state.name

a.js  b.js  在index.js中引用

import Vue from 'vue'
import Vuex from  'vuex'
Vue.use(Vuex)
import A from  './a'
import B from  './b'
let store = new Vuex.Store({
   modules:{A,B}
})

Helper

• Value Type: state, getters

  May be computed attribute values ​​are mapped to the inside through the auxiliary function

• Function type: actions, mutation;

  By an auxiliary function to the mapping function in the method of the internal components

映射：map ---------> mapState 、 mapGetters、 mapActions 、 mapMutations

use

• mapState

import {mapState} from "vuex"

export default{
    ...mapState(['name'])
}
//页面中的
this.$store.state.name
//可以写成
name

• mapGetters

import {mapGetters} from "vuex"

export default{
    ...mapGetters(['name'])
}
//页面中的
this.$store.getters.name
//可以写成
name

• mapMutations

import {mapMutations} from "vuex"

export default{
    ...mapMutations(['name'])
    changeName(){
        this.name({'name1'})
        //this.$store.commit('name')
    }
}
//页面中的
 this.$store.commit('name')
//可以写成
this.name('')

• mapActions

import {mapActions} from "vuex"

export default{
    ...mapActions(['name'])
    changeName(){
        this.name({'name1'})
        //this.$store.dispatch('name')
    }
}
//页面中的
 this.$store.dispatch('name')
//可以写成
this.name('')