vue 中的Vuex实践

建一个文件夹store 在下面新建一个文件inde.jx

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state={   //要设置的全局访问的state对象
    name: 'beautiful',
    address: 'Hunan Changsha',
    school: '国防科大',
    showFooter: true,
    changableNum:0
    //要设置的初始属性值
  };
  export default new Vuex.Store({
    state
})

在main.js 中添加

import store from './store'

new Vue({
  el: '#app',
  router,
  store, //新加
  components: { App},
  template: '<App/>'
})

页面调用

<template>
<el-container>
  <el-header>Header</el-header>
  <!-- <el-main> <my-demo :title="abc" @myclick="fangfayi" ></my-demo> </el-main> -->

  <div>
      第二种方法
      <my-demo :title.sync="abc" >88888888</my-demo>
  </div>

  <br/>
  {{abc}}
  <br/>
  <p/>
  {{countnum}}
  <button @click="testdemo">test</button>
  {{address}}
  <el-footer>Footer</el-footer>
</el-container>
</template>

<script>
import testAVue from './testA.vue';
import MyDemo from '../components/MyDemo.vue';
// import store from '../store/index2.js';
import { mapState } from 'vuex' //这里调用
export default {
     components: {
      MyDemo
     },
    computed: {
      ...mapState({
        name: state => state.name,
        address(state){
          return state.address;
        }
      })
    },   
    data(){
        return{
            msg:'test7777',
            abc:'55555',
            countnum:0 ,
            num:88888,
            count:8
        }
    },
    methods:{
        // fangfayi(vale){
        //    this.abc=vale
        //  }
        testdemo(){
           // store.commit("addnum",10)//同步
          //  this.countnum=store.state.count
          console.log(this.$store.state.name)
        }
    }
}
</script>