vue-vuex状态管理使用详解

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么情况下我应该使用 Vuex

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

1.安装vuex

npm install vuex --save

2.引入vuex

src新建vuex文件目录，新建store.js
store.js如下：

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

Vue.use(Vuex)

const state = {
   
  theme: null
}

const mutations = {
   
  mutationsChangeTheme(state, checkedTheme) {
   
    return (state.theme = checkedTheme);
  }
}

export default new Vuex.Store({
   
  state,
  mutations
})

main.js中引入store.js

import store from './vuex/store';
new Vue({
   
  render: h => h(App),
  router,
  store
}).$mount("#app");

如上，安装引入vuex成功，组件代码内随时随处可以使用。

3.使用vuex

**.vue内存储checkVal值

// vuex存储theme