import {mapState, mapGetters} from Vuex;

computed: {

...mapState(['userStatus', 'vipLevel']);

...mapGetters(['memberInfo']);

}

直接使用：userState 、vipLevel 、 memberInfo 即可，不必写：this.$store.state.userState ......

new Vuex.store()

state 数据仓库

getter 用来获取数据

mutation 用来修改数据，同步修改

action 用来提交mutation，异步修改

专门为vue.js 应用程序开发的状态管理模式。

采用集中式存储管理应用的所有组件的状态。

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

1

函数的副作用。

在分享的方法中又有其他操作，名字和实际内容不相符。 vuex 适合处理函数的副作用。

写好每个函数的定义，把副作用给引出去，导出到外面其他地方去做，或者放在一个集中的地方去处理。

yarn serve    启动服务

--------------actions.js----------

buyVip({commit}, e) {

    return new Promois((resolve, reject) = >{

        //mock api 交互  模拟api请求

        setTimeout(()=>{

            commit('setMemberInfo',{

               userStatus: e.userStatus,

                vipLevel: e.vipLevel,

            })

            resolve('购买成功')

        }, 1000)

    })

}

在要调用的页面引入 store

调用方法中使用

store.dispatch('buyVip', e).then(res=>{

    alert(res)

})

<div>{{memberInfo}}</div>

import { mapGetters, mapState } from 'vuex';

computed: {

    ...mapState(['userStatus','vipLevel']) ,

    ...mapGetters(['memberInfo'])     //getters里的方法名

}

vue create vuex-demo    (用的Vue Cli v3.7.0的脚手架)

code .    用vscode打开当前文件夹

yarn serve  启动项目

yarn add vuex 安装vuex    用yarn安装稍微快点

66666666

集中式存储管理应用

功能：前端状态管理

响应式的数据状态

vscode中执行 shift+command+p，打开命令面板，键入shell，选择“在PATH中安装code命令”

code .快速打开 vscode 某个项目

业务目标：账号登录、权限设置、权限改变、课程分享；

项目功能：

通过state.userinfo控制用户登录路由限制：利用vue的route监控userinfo是否存在，存在说明已登录；

多组件共享state.userStatus和stste.vipLevel状态；

多组件修改state.userStatus和stste.vipLevel。

export default{    
    name: "app",    
    components: {        
        HellowWorld    
    },   
    computed: {        
        count(){   
            return this.$store.state.count;     
        }    
    }
};

Vuex组成

State：数据仓库，数据状态的来源，数据的唯一源，本身是复杂的json对象保存所有数据，即可以实例化；

getter：用来获取数据的，类似Vue的计算（Computed）属性，从现有的state中派生出新的State，用以获取复杂数据、对state中的状态改变、派生出新的状态；

Mutation：用来（同步）修改数据的，类似Vue的function属性，Mutation里的操作是同步的，不能写为异步；

Action：用来提交Mutation，可以进行异步操作，相当于包装Mutation进行异步操作，然后通过Mutation同步修改State数据。

Vuex适合大型单页面应用

多个视图依赖同一状态：多组件的数据共享------读

不同视图的行为改变同一状态：不同组件改变同一数据------写

Vuex：状态管理模式，管理前端状态；

vue所有东西是是组件化的，组件的数据状态状态存储于本地对象中或者全局对象中，Vuex就是存在了全局对象中；

Vue和Vuex的数据状态是响应式的；

Vuex就是存储着响应式数据状态的全局对象。

v-if

v-for="item in list"

state 数据仓库

getter 获取数据

mutation 修改数据

action 提交mutation

model

组成部分

state ----- 数据来源；

getter ----- 改变state；

mutation ----- 同步修改state；

action ----- 异步修改state；

多组件，数据共享；

数据状态的读，改；

管理。

state —— 数据仓库

getter —— 用来获取数据

Mutation —— 用来修改数据的

Action —— 用来提交mutation

安装Vuex

1、安装vuex包：npm install vuex

2、创建vuex实例：new Vuex.store()

3、main.js中将vuex实例挂载到vue对象上

Vuex的组成介绍

①State——数据仓库

②getter——用来获取数据的

③Mutation——用来修改数据的

④Action——用来提交mutation

//count++实战
main.js中
1.state中创建count字段
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
    state:{
        count:0
    }
})
new Vue({
    store,
    ...
})
2.mutations中创建一个count++的mutation
const store = new Vuex.Store({
    state:{
        count:0
    }，
    mutations:{
        countIncrease(state){
            state.count++
        }
    }
})
mutations实现了，
然后在页面模板里面拿到这个state的count，
在app.vue这个组件里面
this.$store.state.count

ps:如何获取vuex中state的数据？
①直接通过vue store这个实例  this.$store.state.count 4'50
②通过vuex提供的...

3.button新增click事件触发mutation改变count
<button @click="countIncrease">点我自增</button>

countIncrease(){
    this.$store.commit("countIncrease");
}

扩展：commit的第二个参数使用
在main.js中
mutations:{
        countIncrease(state，v){
            state.count = v；
        }
    }
在app.vue中
countIncrease(){
    const v = 100；//自定义的值
    this.$store.commit("countIncrease"，v);
}

vuex 的demo

vuex