Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
Vuex使用过程演示
以vue-cli3新创建出来的项目为例，演示Vuex的使用过程。
创建项目:
vue create vuex-test cd vuex-test npm run serve
安装vuex:
npm i vuex -S
进入项目的src/下新建一个文件store/index.js，并写入：
// store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // 容器 （构造函数Store开头大写） state: { // 状态 count: 0 }, mutations: { // 变化（使用mutations提交改变是为了方便追踪变化记录） increment (state){ state.count++ } } }) export default store // 导出
进入main.js 注入store，使所有vue组件能够使用vuex :
// main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
现在我们可以从组件的方法提交一个变更：
methods: { increment() { this.$store.commit('increment') // .commit('<mutations里的事件名>') console.log(this.$store.state.count) } }
在组件模板中使用状态：
{{ count }} computed: { count() { return this.$store.state.count } }
state状态的改变会触发computed的重新计算
