在单页面组件的开发中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来获取状态了。