Vue速成day08--vuex的使用

官网:https://vuex.vuejs.org/zh/

什么是vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，

并以相应的规则保证状态以一种可预测的方式发生变化。

理念：单向数据流

v-model：双向数据绑定 如果遇到了表单，就不建议使用vuex.

安装

cnpm i  vuex --save

使用

store/index.js

//引入
import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex)

//创建仓库
export default new Vuex.Store({
    //数据-状态
    state:{
      name:"妲己",
      age:20
    },
    //修改状态
    mutations:{
      changeWang(state){
        state.name="王昭君"
      },
      change50(state){
        state.age=50
      }
    },
    actions:{
        changeWang(context) {
            //context是当前所在的仓库
            setTimeout(() => {
                context.commit("changeWang")
            }, 1000)
        },
        changeName(context, name) {
            context.commit("changeName", name)
        }
    }
  })

main.js 仓库挂到根实例上

import store from "./store"
new Vue({
  router,
  //仓库
  store ,
})

组件中直接取数据，也可以直接调用方法

<p>name:{{$store.state.name}}</p>
<p>age:{{$store.state.age}}</p>
<button @click="$store.commit('changeWang')">点击变 王昭君</button>
<button @click="$store.dispatch('changeWang')">action 王昭君</button>
<button @click="$store.dispatch('changeName','貂蝉')">貂蝉</button>

mutations VS actions

mutations ：处理的是同步操作，直接修改状态. 通过 仓库.commit()

actions:接收组件的动作，处理的是异步操作。通过 仓库.dispatch()

state 定义初始状态

const state={
    name:"妲己",
    age:20
}
new Vuex.Store({
    state
})

mutations 修改state

处理的是同步操作，直接修改状态. 通过 仓库.commit()

const mutations = {
    changeWang(state) {
        state.name = "王昭君"
    },
    change50(state) {
        state.age = 50
    },
    changeName(state, name) {
        state.name = name;
    }
}
new Vuex.Store({
    mutations
})

actions :接收组件派发的动作

接收组件的动作，处理的是异步操作。通过 仓库.dispatch()

const actions = {
    changeWang(context) {
        //context是当前所在的仓库,是个只读的
        setTimeout(() => {
            context.commit("changeWang")
        }, 1000)
    },
    changeName(context, name) {
        context.commit("changeName", name)
    }
}
new Vuex.Store({
    actions
})

getters

// 导出状态给组件:1.成批到处数据 ；2.经过现有状态计算得到的状态
const getters={
    name(state){
        return state.name;
    },
    age(state){
        return state.age
    },
    hi(state){
        return `我叫${state.name},年龄${state.age}`
    }
}

new Vuex.Store({
    getters
})

modules 模块

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions,
    modules:{
        movie,
        food:{
            state:{},
            mutations:{},
            actions:{},
            getters:{},
            namespaced:true
        }
    }
})

目录

-store 
	index.js 创建store并到处
	actions 根级别下的actions 
	mutations 根级别下的mutations state getters
	-modules
		movie
		food

小结

state 状态，mutations 修改state ; 
getters 将state导出给组件，actions 让组件派发动作

组件借助辅助函数 mapGetters mapActions

import {mapGetters,mapActions} from "vuex"

 	computed:{
        /*
        ...mapGetters([
            "name",
            "age",
            "hi"
        ])*/ 
        ...mapGetters({
            name:"name",
            nianling:"age",
            hi:"hi"
        }),
        a(){
            return 10;
        }
    },
    methods:{
        ...mapActions({
            cWang:"changeWang",
            changeName:"changeName"
        }),
        cc(){

        }
    },