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)
},