Vuex2.X—以属性模式构建store

​
本文只正对Vuex2.X版本

一、创建Vuex2.X空项目

    npm init webpack vuex_property

    进入vuex_property文件下，在文件路径中输入cmd，这里我选择通过yarn安装依赖包，文件结构如下：

​​​​

二、添加vuex依赖包

    yarn add vuex@3.6.0

在src下添加store文件夹，并在文件夹下添加actions.js，getters.js，mutations.js，state.js，index.js文件

三、添加store相关文件

在index.js中添加

	import Vue from 'vue'
	
	import Vuex from 'vuex'
	
	import { state } from './state'; // 引入 state
	
	import { getters } from './getters'; // 引入 getters
	
	import { mutations } from './mutations'; // 引入 mutations
	
	import { actions } from './actions'; // 引入 actions
	
	//使用vuex
	
	Vue.use(Vuex)
	
	//导出store
	
	export default new Vuex.Store({
	
	  state: state,
	
	  getters: getters,
	
	  mutations: mutations,
	
	  actions: actions,
	
	})

在state.js中添加

export const state ={
    name: '张三',
    number: 0,
    list: [
      { id: 1, name: '111' },
      { id: 2, name: '222' },
      { id: 3, name: '333' },
    ]
   }

在actions.js中添加

export const actions = {
    // 增加actions属性
    setNum({ commit },payload) {
      // 增加setNum方法，默认第一个参数是content，其值是复制的一份store
      return new Promise(resolve => {
        // 我们模拟一个异步操作，1秒后修改number为888
        setTimeout(() => {
          commit('setNumberIsWhat', { number: payload.number });
          resolve();
        }, 1000);
      });
    },
  }

在getters.js中添加

export const getters={
    getMessage(state){
      return `hello ${state.name}`
    }
}

在mutations.js中添加

export const  mutations={
    // Mutations里面的函数必须是同步操作，不能包含异步操作！
    // 增加nutations属性
    setNumber(state) {
      // 增加一个mutations的方法，方法的作用是让num从0变成5，state是必须默认参数
      state.number = 5;
    },
    setNumberIsWhat(state, payload) {
      // 增加一个带参数的mutations方法
      state.number = payload.number;
    },
   }

四、组件中使用

<template>
<div class="child-a">
  <p>ChildA:{{count}}</p>
  <button @click="handleClick(10)">ChildA-Add</button>
</div>
  </template>
  
  <script>
//    import store from '../store'
//要想使用展开运算符，就要先引入
import { mapState,mapGetters,mapMutations, mapActions  } from 'vuex'
  export default {
  name: 'ChildA',
  data () {
    return {
    //   count: 0
    }
  },
  //通过计算属性来获得count
  computed: {
    // ...mapState({"countAdd":"child/count"}),
    ...mapState({
      count: state => state.child.count,
    }),
    ...mapGetters(['count'])
  },
  methods:{
    ...mapMutations({"countAdd":"child/countAdd"}),  
    ...mapActions({setCount:"child/setCount"}),  
    handleClick(num){
      //通过dispatch触发actions中的方法countAdd，actions提交mutations，num是携带的参数
      // this.$store.commit('countAdd',num)
      // this.countAdd(num)
      this.setCount({number:10})
    },

    
  }
}
  </script>
  <style scoped>
  </style>