Bootstrap

vue cli 3.0 项目搭建及使用vuex

1.创建一个vuetest文件

vue create vuextest

2.选择配置 

选择自定义配置

 

勾选vuex(空格选中 enter确认配置)

yes 或者no 自己选择

使用哪种css预处理 我选的sass

eslint规范选择

选择语言检查方式 (保存检查)

把babel .eslint这些文件放在独立的文件里还是package.json里

安装依赖(

cd vuextest(进入项目目录)

npm i(安装依赖)

npm run serve(运行)

)

运行后浏览器打开 

配置时选择了vuex 项目创建完成后默认引用了store

store.js 文件

import Vue from 'vue'

import Vuex from 'vuex'

 

Vue.use(Vuex)

 

export default new Vuex.Store({

// 存储的公共对象

state: {

name: '张'

},

// 定义一个方法改变name

mutations: {

changeanme (state , msg) {

state.name = msg

}

},

actions: {

}

})

在任意页面调用this.$store即可查看store中的内容 

created() {

console.log(this.$store)

console.log(this.$store.state.name)

// 调用commit方法改变store中的name

// changeanme 对应store.js中定义的方法

this.$store.commit('changeanme','zhang')

console.log(this.$store.state.name)

},

;