第一步：
1 新建一个文件夹 store,在里面index.js里面内容 是如下
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
然后再继续写
const store =new Vuex.Store({
//在这里面，分为5个部分
//第一部分 state:{}
第二部分 mutation:{} 唯一能够修改state中数据的方法
第三部分 getters:{{} 抛出数据的。
第四部分 action
第五部分 module
}) 大致代码如下
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
// 提供仓库
const store = new Vuex.Store({
state: {count：“我是vue里面的值" },
mutations: {},
getters:{ }
})
export default store;
第二部分 在main.js中引入store
import store from "./store"
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
第三部分 获取数据两种方式
1 直接在页面的computed中使用this.$store.state.count获取
computed:{
//要获取vuex中的数据，最好放到计算属性中
count(){
/return this.$store.state.count
}
}
然后再组件中就可以直接使用变量count
2 第二种方法需要修改vuex store中的getters方法
我们修改一下store中的getter，修改如下 添加了一个getCount的方法
const store = new Vuex.Store({
state: {count：“我是vue里面的值" },
mutations: {},
getters:{
getCount(state){
return state.count;
}
}
})
页面中首先要引入
import {mapGetters } from "vuex"
然后再computed中直接 使用mapgetter来获取vuex数据
computed:{
//要获取vuex中的数据，最好放到计算属性中
...mapGetters([
'getCount'
])
这样页面中直接使用getCount这个变量
第四部分 怎么修改vuex中的数据
1 首先在store问mutation中创建对应的方法
现在在mutations中创建了一个changeCount的方法
mutations: {
changeCount (state，params) {
// 变更状态
state.count="我是修改后的vuex数据"
console.log(state)
},
},
然后再组件页面上直接通过
this.$store.commit("changeCount ",{这写参数})
