[TOC] >[success] # Vuex -- 参数使用理解  ~~~ 1.'Store' -- vuex 的仓库储存这我们需要使用的参数内容在创建的时候使用: new Vuex.Store({}) 2.'state' -- 可以理解成Vue中的data，我们的一些公共数据放在这里 3.'mutations' -- 可以理解成Vue中的methods。也可以理解成java的set。简单的说 所有对'state' 中的数据更改都是通过'mutations' 中的方法操控，Vuex 不提倡直接 更改'state' 中的数据 4.'getters' -- 可以理解成Vue的computed 计算属性，或者java中的get，当我们要 获取'state' 中的方法的时候从getter中取值 5.'Action' -- 异步获取请求参数赋值，他会操控'mutations',再让'mutations'给 'state' 赋值 6.'module' -- ~~~ >[danger] 全套写法 >[info] ## 简单案例 -- 只分析state ~~~ 1.下面的案例只是演示如何最简单的展示'state' 中的数据 实际开发中是不会这么 用的 ~~~ >[danger] ##### store文件下的state.js中内容 ~~~ 1.state 相当于vue中的data 我们在里面创建了一个'appName' data ~~~ ~~~ const state= { appName:'admin', }; export default state ~~~ >[danger] ##### 在views文件夹下创建视图组件store.vue ~~~ 1.由于我们在mian.js 中的vue.js 实例中使用了'store',因此在全局的组件中我们都 可以调用这个Vuex创建出来的实例，调用的时候使用vue惯有的$调用即可，下 面的案例就是展示了在'store.vue' 视图中，如何直接使用Vuex 中存的数据展示 2.下面的方式 我们不推荐，但是可以看出使用方法是'this.$store.state.存值的名称' 3.也可以发现使用的时候我们在计算属性中定一个了一个方法，作为用来接受 vuex中对应值 ~~~ ~~~ <template> <div> <p>{{appName}}</p> </div> </template> <script> export default { name: "store", data(){ return{} }, methods:{}, computed:{ // 在计算属性中 创建一个方法用来接受 vuex 中的stat appName(){ return this.$store.state.appName; } } } </script> <style scoped> </style> ~~~ >[info] ## 简单案例-- 如何获取模块中的state ~~~ 1.我们在创建'store' 文件夹的时候，为了做进一步的拆分，我么拆分出来一个 module 文件夹，这里面存放了一个user 模块，下面的案例展示展示了如何获取 模块中的vuex ~~~ >[danger] ##### 在stor文件下的module文件下的user.js写法 ~~~ const state = { userName: 'Wang' }; const mutations = { }; const actions = { }; export default { state, mutations, actions, } ~~~ >[danger] ##### 在views文件夹下创建视图组件store.vue ~~~ 1.在计算属性中 创建一个方法用来接受 vuex 中的state，掉用的时候 'this.$store.state.模块名.模块中' ~~~ ~~~ <template> <div> <p>{{userName}}</p> </div> </template> <script> export default { name: "store", data(){ return{} }, methods:{}, computed:{ // 在计算属性中 创建一个方法用来接受 vuex 中的stat userName(){ return this.$store.state.user.userName; } } } </script> <style scoped> </style> ~~~ >[info] ## getters -- 页面获取值 ~~~ 1.文章最开始说过不推荐直接使用'state' 并且将内容展示和更改，因此当我们想使 用'state' 的值的时候。我们需要使用vuex中的'getters'。'getters' 相当于vue中的计 算属性。它是一个方法监听方法内部调用的state 值发生改变，如果改变就做出对 应的操作 2.根据上面的描述可以勾勒出getters内部是一个个方法，这个方法可以使用到 state中要监听的具体值，因此写法如下: const getters = { // state 就是vuex 仓储中的state // getters 有点类似vue中的计算属性来监听内部使用的state值的变化 // 根据state 对应值变化显示对应信息 appNameWithVersion:(state) =>{ return `${state.appName}v2.0` } }; export default getters ~~~ >[danger] ##### store文件下的getters.js中内容 ~~~ const getters = { // state 就是vuex 仓储中的state // getters 有点类似vue中的计算属性来监听内部使用的state值的变化 // 根据state 对应值变化显示对应信息 appNameWithVersion:(state) =>{ return `${state.appName}v2.0` } }; export default getters ~~~ >[danger] ##### 在views文件夹下创建视图组件store.vue ~~~ 1.使用步骤和'state' ，使用起来'this.$store.getters.对应的getters值' ~~~ ~~~ <template> <div> <p>{{appName}}</p> <p>{{userName}}</p> </div> </template> <script> import { mapState } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{}, computed:{ // 在计算属性中 创建一个方法用来接受 vuex 中的getter appName(){ return this.$store.getters.appNameWithVersion; }, } } </script> <style scoped> </style> ~~~ >[info] ## mutations -- 操控值 ~~~ 1.当我们想改变'state' 中的值的时候可以使用'mutations ',它相当于vue的method ，也就是是可以理解我们来触发Vuex 中的'mutations '方法来改变getters值 2.每个'mutations ' 中定义的参数两个值，第一个值是Vuex中的'state' 对象，第二 个是，传递过来的参数，也是一个对象 3.如何使用，在Vuex 的'mutations ' 定义好之后，在对应的组件中的methods 方 法去触发，有点类似子传父，使用方法: this.$store.commit('mutations 中的方法名','参数对象') ~~~ >[danger] ##### store文件下的getters.js中内容 ~~~ const mutations= { SET_APP_NAME(state,params){ state.appName = params }, }; export default mutations ~~~ >[danger] ##### 在views文件夹下创建视图组件store.vue ~~~ <template> <div> <p>{{appNameWithVersion}}</p> <button @click="handleChangeAppVersion">点击</button> </div> </template> <script> import { mapGetters } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ handleChangeAppVersion(){ this.$store.commit('SET_APP_NAME','版本') }, }, computed:{ ...mapGetters(['appNameWithVersion']) } } </script> <style scoped> </style> ~~~ >[danger] ##### 另一种用法 ~~~ 1.上面在 this.$store.commit('mutations 中的方法名','参数对象') 传递的是两个参 数，下面这种传递是一个对形象 ~~~ ~~~ const mutations= { SET_APP_NAME(state,params){ state.appName = params.appName }, }; export default mutations ~~~ ~~~ <template> <div> <p>{{appNameWithVersion}}</p> <button @click="handleChangeAppVersion">点击</button> </div> </template> <script> import { mapGetters } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ handleChangeAppVersion(){ this.$store.commit({ type:'SET_APP_NAME', appName:'版本' }) }, }, computed:{ ...mapGetters(['appNameWithVersion']) } } </script> <style scoped> </style> ~~~ >[info] ## 思考如果没在'state' 定义那么'mutations '怎么使用 ~~~ Mutation 需遵守 Vue 的响应规则，最好提前在你的 store 中初始化好所有所需属性。 当需要在对象上添加新属性时，你应该 1.Vue.set(obj, 'newProp', 123) 2.以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写： state.obj = { ...state.obj, newProp: 123 } ~~~ >[danger] ##### 举个例子 ~~~ 1我们没有在state中定义time，但是在mutations 中应该怎么使用呢 2.注意要是没用定义的值想在组件中使用需要定义'mapState ' ~~~ ~~~ import vue from 'vue' const mutations= { SET_APP_NAME(state,params){ state.appName = params.appName }, SET_Time(state,params){ vue.set(state,'timee','17:00') } }; export default mutations ~~~ ~~~ <template> <div> <p>{{appNameWithVersion}}</p> <p>{{timee}}</p> <button @click="handleChangeAppVersion">点击</button> <button @click="handleChangetime">时间</button> </div> </template> <script> import { mapGetters,mapState } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ handleChangeAppVersion(){ this.$store.commit({ type:'SET_APP_NAME', appName:'版本' }) }, handleChangetime(){ this.$store.commit({ type:'SET_Time', }) }, }, computed:{ ...mapState(['timee']), ...mapGetters(['appNameWithVersion',]) } } </script> <style scoped> </style> ~~~