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)

},