VUEX的使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

从新建到使用过程

• 建立文件结构
  
  MODULES中文件的结构

• xxxx.js
  
  部分代码：

export default {
  namespaced: true, // 命名空间，由于多个vuex区别
  state: {
    // 初始化数据
    count: 5,
    todos: [
      { id: 1, text: "modules2true", done: true },
      { id: 2, text: "modules2false", done: false }
    ]
  },
  mutations: {
    increment(state) {
      // 变更状态
      state.count--;
    }
  }, // 用于修改state的唯一途径
  getters: {
    doTodo(state) {
      return state.todos.filter(todo => !todo.done);
    }
  }, // 用于数据的过滤和处理
  actions: {
    increment({ commit }, data) {
      commit("increment", data);
    }
  } // 提交mutations,可包含异步操作
};

• index.js 文件（主要用于文件导入和store的新建和导出）
  

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

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules
})
console.log(modules, 16)
export default store

以上就是vuex的创建过程，下面讲解vue想的使用和全局挂载

• 在main.js 上全局挂载

import store from './store'
new Vue({
  el: '#app', 
  store,
  components: { App },
  template: '<App/>'
})

• 页面使用store数据及模块的方法

import { mapState, mapMutations, mapGetters, mapActions } from "vuex"; // 导入所需的数据

export default {
	name:'helloworld',
	data () {
		return {}
	},
	computed:{
	/* 基本用法
	...mapXXXX('modlue名字',['方法名'，...可多个])
	**/
		...mapState('module1',['todos','count1','arg']), // 
	    ...mapState('module2',['count']),
	    ...mapGetters('module1',['doTodo']),
	    ...mapGetters('module2',['doTodo2'])
	},
	methods:{
	/* 基本用法
	...mapXXXX('modlue名字',['方法名'，...可多个])
	**/
	...mapMutations('module1',['increment']),
    ...mapMutations('module2',['increment2']),
    ...mapActions('module1',['aincrement']),

	}
}

• HTML渲染

 <div>vuex的使用</div>
   <br/>
   <div>module1.js的数据
     <div>{{todos}}</div>
     <div>{{count1}}</div>
     <div>{{arg}}</div>
   </div>
    <div>module2.js的数据
     <div>{{count}}</div>
   </div>
   <br/>
   <p>module1的getter</p>
   {{doTodo}}
   <p>module2的getter</p>
   {{doTodo2}}
   <br/>
   <p>modlue1的mutations</p>
   <button @click="increment">increment</button>
    <p>modlue2的mutations</p>
   <button @click="increment2">increment2</button>
   <br/>
   <p>modlue1的Actions</p>
   <button @click="aincrement(222)">Actions</button>

• 还可以直接调用vuex的state数据

	<p>使用vue的prototype读取数据</p>
   <p>{{$store.state.module2.count}}</p>

以上就是vuex的基本用法