VueX 基础（state/mutation/action）

数据存放在state里面，如何去改变数据Mutation，什么时间去改变，怎么改变action

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.Vuex是处理多个组件共享状态state的问题，包括多个试图依赖于同一个状态、来自不同视图的行为需要变更同一状态。

image.png

如图，其中state是保存状态的地方，mutations是如何改变这写状态，actions是什么时间去触发mutation。
简单的一个例子说明：
首先在app.vue同级目录创建一个store.js文件，这个文件就是vuex处理数据的地方。
store.js 文件注释说明在代码中

// 导入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex组件
Vue.use(Vuex)

// 添加一个state，存放状态值
const state = {
    count: 1
}
// 添加mutations，对状态值进行操作，这里做++和--操作
const mutations = {
    increment(state) {
        state.count++
    },
    decrement(state) {
        state.count--
    }
}
// 添加actions，外部关联触发mutation
const actions = {
    increment: ({ commit }) => {
        commit('increment')
    },
    decrement: ({ commit }) => {
        commit('decrement')
    }
}
// 导出定义的state，mutations,actions
export default new Vuex.Store({
    state, mutations, actions
})

那如何使用定义的vuex相关属性呢。首先要在main.js里面导入store.js，然后初始化store。代码：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

接下来就是在组件中使用这个store。创建一个vue-x.vue文件

<template>
  <div>
    <div class="vuex">vuex {{$store.state.count}}</div>
     </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  methods: mapActions(["increment", "decrement"])
};
</script>

<style lang="stylus"></style>

由于main.js中注册了store，这里需要引用store里面state的值，则可以写成

$store.state.count

运行结果：

image.png

针对上面对count值的改变，如果是一个页面的数据改变，那么在 data里面也是可以实现的。那多个页面使用单个state的话，会导致数据臃肿，代码的可读性差，多个页面怎么使用state呢？下篇会介绍module使用，来解决这个问题。

最后编辑于：2020.06.08 10:23:06