Vuex快速入门 Vue状态管理（vuex超简单入门，图文详解）状态管理模式

环境是根据以前文章所搭建：
vue项目创建并添加路由
动态路由教学
嵌套路由教学
需要查看以往的项目搭建，可以自行查看，在以下就不赘述

1 vuex简介

“Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。”这是官方文档上的描述，通俗点说就是统一管理用户的状态（如登录状态），让我们能够在我们整个站点中都能够获取到这些信息。

2 安装Vuex

cmd命令行模式进入到项目目录下，对vuex进行安装

cnpm install vuex --save

并启动项目

npm run serve

3 Vuex入门

3.1 读取状态值

在项目src下创建store文件夹，在文件夹中创建index.js文件，并输入一下内容

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)//开启Vuex

const store = new Vuex.Store({
    state:{//定义仓库内所有的状态
        count: 0
    },
})
export default store

激活Vuex，在src/main.js中添加：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'//如果需要导入的是index.js可以不用写

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
  store, //添加
}).$mount('#app')

下面我们需要读取count的值，打开我们以前教程写过的文件about.vue在模版中加入

{{$store.state.count}}<br>

然后我们就能在浏览器中访问“关于我们”

3.2 改变状态值

在src/store/index.js文件中加入以下内容

mutations:{
        increment(state,x){
            state.count += x
        }
    },

其中x也可以不写，不写的话，将方法体改成这样也行 state.count ++

回到about.vue中，在模版中加一个按钮

<button @click="addCount()">测试</button>

在下面创建js脚本

<script>
export default {
    methods:{
        addCount(){
            this.$store.commit('increment',10)//commit调用mutations,加10
        }
    }
}
</script>

3.3 状态值共享

状态值在整个站点都是共享的，所以我们在其他页面也能取到这些值，只需要在其他页面中访问状态值即可，我们在列表页list.vue中访问。在list.vue中添加代码:

{{$store.state.count}}<br>

在“关于我们页面”中点击按钮几次，后切换到“列表页面”中去。

3.4 Actions

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
  在store/index.js中添加

actions:{
        increment(content){
            content.commit('increment',10)
        }
    },

修改about.vue中的methods中的方法

addCount(){
            //this.$store.commit('increment',10)//commit调用mutations,加10
            this.$store.dispatch('increment')//dispatch调用actions
            console.log(this.$store.state.count)//js中获取值
        }

在浏览器中你会发现效果跟以前写的一样，只是换一种方法。this.$store.state.count 让我们能够在js中获取状态值

3.5 派生属性Getter

什么是派生属性？派生，依托于别的属性，也就是说根据状态属性的值来改变自己的值。
在store/index.js中添加

//派生属性
    getters:{
        remark(state){
            if(state.count<50){
                return '加油'
            }else if(state.count<100){
                return '你真棒'
            }else{
                return '你是大神'
            }
        }
    }

访问派生属性值，在about.vue模版中添加代码

{{$store.getters.remark}}<br>

然后就可以在浏览器中看见效果了

当我们点击按钮5次

当我们在点击按钮5次

如果你觉得博主写的还不错，请点赞哦！