如何在vue-cli中使用vuex

第一步：

    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: ''

})

第三部分  获取数据两种方式

  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 ",{这写参数})