vuex的使用

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
• 下面我们来从零开始使用vuex
• 首先，在我们项目中，安装vuex

npm i vuex -S

• 在src文件夹下创建store文件夹，管理vuex数据

  
  
  vuex文件目录结构.png
  
  

  index.js是入口文件，也就是store仓库，在这里注入store，modules是模块，globalActions是全局的actions，globalMutaions是全局的mutaions，globalState是全局的state相当于全局data。

• 在index中写代码,形成简单的store仓库

// 引入vue
import Vue from 'vue';
// 引入vuex
import Vuex from 'vuex';
// 注入vuex
Vue.use(Vuex)
Vue.config.devtools = true;


const store = new Vuex.store({
    // 相当于组件中的数据data，专门用来存放全局的数据
    state: {
        count: 0
    },
    // getters相当于组件的computed，区别是getters是全局的，computed是组件内部的
    getters: {
         getNum(state) {
             return state.count
        }
    },
    // 相当于组件中的methods
    mutations: {
         // mutations里面的函数接收两个参数，一个是state，就是数据，另一个是payload，是新数据，这个可传可不传
        increase(state) {
            state.count += 1
        }
    },
    actions: {},
    modules,
});
// 导出store
export default store

• 在main.js中引入store

import Vue from 'vue'
import App from './App.vue'
// 引入store
import store from './store'
// 引入路由
import router from './router'

Vue.config.productionTip = false

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