vuex中state的用法

1.在main.js中引入vuex，
import Vuex from 'vuex'  
Vue.use(Vuex)
new Vue({
  el: '#app',
  router,
  store,（.....别忘记还有它......）
  components: { App },
  template: '<App/>'
})
2.在新建store文件夹，然后在文件夹下新建文件store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    count:0,
    title:'佩奇'
  },
})
3.在要用到的组件页面
<template>
    <div class="box">
     <div class="add" @click="changeCount" >＋</div>
      <div style="color:blue">总价为：{{Allprice}}</div>
      <p>名字：{{title}}</p>
      <p>数量：{{count}}</p>
      <p>单价：{{Oneprice}}</p>
     </div>
 </template>

<script>
 data () {
    return {
      countIndex:'',
      Oneprice:100,
      Acount:0，
  },
computed:{
//获取我们要用的值
     count(){
      this.countIndex=this.$store.state.count
      return this.countIndex
    },
    title(){
      return this.$store.state.title
    },
    Allprice(){
      let price=this.countIndex*this.Oneprice
      return price
    },
},
methods:{
    changeCount(){
      this.Acount++;
      this.$store.commit('changeCount',this.Acount)//第一参数为函数名
      // 第二参数为改变的值
    }, 
}
</scropt>
4.在store.js页面中通过mutations去改变值
 mutations:{//要动态的改变原本的值
    changeCount:function (state,count) {//组件的那个改变值得函数名
      state.count=count//重新赋值
      console.log(state.count)
    }
  },复制代码