Vuex—状态管理模式

在单页面组件的开发中Vue的vuex被称为状态管理，个人的理解就是你在state中定义一个数据之后，可以在项目中的任何一个组件里进行获取、进行修改，并且这个修改是可以得到全局的响应变更。

要分析vuex，首先要安装使用vuex

npm install vuex --save

 然后在src文件目录下新建一个store的文件夹，并在store文件夹中新建一个index.js文件。

因为在实际开发中，会有多个组件的状态管理，如果统一放在index.js文件中，会增加代码的维护难度。所以接下来，我会在store文件夹中新建两个js文件，并在index.js中引用。

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
// import { nanoid } from 'nanoid'
Vue.use(Vuex)

import countOptions from './count.js'
import personOptions from './person.js'


export default new Vuex.Store({
  modules:{
      countOptions,
      personOptions
  }
})

 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default  new Vuex.Store(

);

接下来，在main.js里面引入store，然后再全局注册一下，

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

Vue.config.productionTip = false

import store from './store'

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

 完成上面的准备工作后，接下来就是在index.js中声明 state，actions，mutations，getters这四个变量。我们先在state中随便定义两个初始属性值。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//求和功能的相关配置
export default  {
    actions: {
      
    },
    mutations: {
        
    },
    state: {
        num :0,
        schools: '天马流星拳',
        subject: '流星拳',
   
    },
    getters: {

    },
}

做完上述步骤后，就可以在任何一个组件中使用this.$store.state.xxx来获取状态了。