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 = falsenew 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}}来显示值 如果有值即成功