HbuilderX vuex配置

HbuilderX新建的vue项目 用到了vuex 不是通过脚手架配置vue 所以vuex也没有按我看的视频教程自动安装在项目中 所以记录一下配置过程

一、vuex.js下载

保存后放入项目根目录下
然后在main.js中引入
main.js

import Vue from 'vue'
import App from './App.vue'
import router from '../router/index.js'
import store from './store.js' ///这里
Vue.config.productionTip = false

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

二、创建store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		count:0,
	},
	mutations: {
		add(state){
			state.count ++
		},
		decrease(state){
			state.count --
		}
	},
	actions: {
		delayAdd(context){
			setTimeout(()=>{
				context.commit("add")
			},1000);
		}
	},
})

三、打开项目终端安装vuex

cnpm install --save vuex

四、测试

创建一个 .vue文件

computed:{
			count(){
				return this.$store.state.count
			}
		},

通过界面{{count}}来显示值 如果有值即成功